在Vue 3中使用Pinia来管理用户的登录状态和个人信息

首先,让我们创建UserStore:

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    user: null,
    isLoggedIn: false,
  }),
  
  getters: {
    getUserInfo: (state) => state.user,
    getLoginStatus: (state) => state.isLoggedIn,
    getUsername: (state) => state.user?.username || 'Guest',
  },
  
  actions: {
    async login(username, password) {
      // 这里应该是一个实际的API调用
      // 为了演示,我们直接模拟一个成功的登录
      this.user = {
        id: 1,
        username: username,
        email: `${username}@example.com`,
      }
      this.isLoggedIn = true
    },
    
    logout() {
      this.user = null
      this.isLoggedIn = false
    },
    
    updateUserInfo(userInfo) {
      this.user = { ...this.user, ...userInfo }
    },
  },
})

现在,让我们创建一个Vue组件来展示如何使用这个UserStore:

<template>
  <div class="bg-gray-100 min-h-screen flex items-center justify-center">
    <div class="bg-white p-8 rounded-lg shadow-md w-96">
      <h1 class="text-2xl font-bold mb-6 text-center text-gray-800">User Profile</h1>
      
      <div v-if="userStore.isLoggedIn">
        <p class="mb-4 text-gray-600">Welcome, {{ userStore.getUsername }}!</p>
        <p class="mb-2 text-gray-600">Email: {{ userStore.getUserInfo.email }}</p>
        <button @click="logout" class="w-full bg-red-500 text-white py-2 px-4 rounded hover:bg-red-600 transition duration-300">
          Logout
        </button>
      </div>
      
      <form v-else @submit.prevent="login" class="space-y-4">
        <div>
          <label for="username" class="block text-sm font-medium text-gray-700">Username</label>
          <input v-model="username" id="username" type="text" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
        </div>
        <div>
          <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
          <input v-model="password" id="password" type="password" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
        </div>
        <button type="submit" class="w-full bg-indigo-600 text-white py-2 px-4 rounded hover:bg-indigo-700 transition duration-300">
          Login
        </button>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useUserStore } from '../stores/user'

const userStore = useUserStore()

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

const login = async () => {
  await userStore.login(username.value, password.value)
  username.value = ''
  password.value = ''
}

const logout = () => {
  userStore.logout()
}
</script>

这个例子展示了如何在Vue 3中使用Pinia来管理用户的登录状态和个人信息:

1. 我们创建了一个UserStore,包含用户信息、登录状态、以及相关的actions和getters。
2. 在UserProfile组件中,我们使用useUserStore()来访问store。
3. 组件根据userStore.isLoggedIn的值来显示登录表单或用户信息。
4. 登录操作调用userStore.login(),登出操作调用userStore.logout()。
5. 我们使用userStore.getUsername和userStore.getUserInfo来显示用户信息。

这种方式可以让你在整个应用中方便地管理和访问用户状态。你可以在任何需要用户信息的组件中导入并使用这个store。

要使用这个store,确保你的项目已经安装了Pinia,并在main.js中进行了配置:

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
app.use(createPinia())
app.mount('#app')

这样,你就可以在整个应用中使用这个UserStore来管理用户的登录状态和个人信息了。