Piniaを学ぶためのログインケースパッケージ

ログイン事例 Pinia

Pinia は、Vue.js で使用できる非常にシンプルで直感的な状態管理ライブラリです。これは、Vue.js アプリケーションの状態をより適切に管理するのに役立ち、ビジネスロジックを整理して分離する簡単な方法を提供します。

以下は、Pinia を使用してユーザーのログインステータスを管理する方法を示す簡単なログインケースです。

まず、Ponia をインストールする必要があります。Vue プロジェクトのルートディレクトリで、次のコマンドを実行してインストールします。

`npm install pinia`

main.js で Pinia をインポートして使用します。

import {
    
     createPinia } from 'pinia'
import {
    
     createApp } from 'vue'

const app = createApp(App)
const pinia = createPinia()

app.use(pinia)
app.mount('#app')

authStore.jsログインステータスを管理するためのストアを定義するファイルを作成します。

import {
    
     defineStore } from 'pinia'

export const useAuthStore = defineStore('auth', {
    
    
  state: () => ({
    
    
    user: null,
    isLoggedIn: false,
  }),

  actions: {
    
    
    login(username, password) {
    
    
      // 模拟登录请求
      return new Promise((resolve, reject) => {
    
    
        setTimeout(() => {
    
    
          if (username === 'admin' && password === 'admin123') {
    
    
            this.user = {
    
     username }
            this.isLoggedIn = true
            resolve()
          } else {
    
    
            reject('Invalid credentials')
          }
        }, 1000)
      })
    },
    logout() {
    
    
      this.user = null
      this.isLoggedIn = false
    },
  },
})

Vue コンポーネントで使用されますuseAuthStore:


<template>
  <div>
    <h1 v-if="auth.isLoggedIn">Welcome, {
    
    {
    
     auth.user.username }}!</h1>

    <form v-if="!auth.isLoggedIn" @submit.prevent="login">
      <label for="username">Username:</label>
      <input type="text" id="username" v-model="username" />

      <label for="password">Password:</label>
      <input type="password" id="password" v-model="password" />

      <button type="submit">Login</button>
    </form>

    <button v-if="auth.isLoggedIn" @click="logout">Logout</button>
  </div>
</template>

<script>
import {
    
     useAuthStore } from './authStore'

export default {
    
    
  setup() {
    
    
    const auth = useAuthStore()

    const username = ref('')
    const password = ref('')

    const login = () => {
    
    
      auth.login(username.value, password.value)
        .then(() => {
    
    
          // 登录成功
        })
        .catch((error) => {
    
    
          console.error(error)
        })
    }

    const logout = () => {
    
    
      auth.logout()
    }

    return {
    
    
      auth,
      username,
      password,
      login,
      logout,
    }
  },
}
</script>

ユーザーがログインフォームに正しいユーザー名とパスワードを入力すると、ユーザーがログイン済みとして設定され、ユーザーにウェルカムメッセージが表示され、ログアウトボタンが表示されます。ユーザーがログアウトボタンをクリックすると、ユーザーはログインしていないと設定されます。

これは単なる例であり、ニーズに応じてさらに拡張およびカスタマイズできます。Pinia は、状態の永続化、モジュールの分割など、より多くの機能と使用法を提供します。詳細については、Poniaの公式ドキュメントを参照してください。

Piniaを学ぶためのログインケースパッケージ

ログイン事例 Pinia

おすすめ