在Vue 3中使用UserStore保存登录状态和个人信息

import { defineStore } from 'pinia'
 
// 使用defineStore创建一个新的store
export const useUserStore = defineStore({
  id: 'user', // 唯一id，用于在应用中访问该store
  state: () => ({
    isLoggedIn: false, // 登录状态
    userInfo: null // 用户信息
  }),
  actions: {
    // 登录动作
    login(userInfo) {
      this.isLoggedIn = true;
      this.userInfo = userInfo;
    },
    // 登出动作
    logout() {
      this.isLoggedIn = false;
      this.userInfo = null;
    }
  }
});
 
// 在Vue组件中使用
import { useUserStore } from './path/to/userStore';
 
export default {
  setup() {
    const userStore = useUserStore();
 
    // 登录操作
    const handleLogin = (userInfo) => {
      userStore.login(userInfo);
    };
 
    // 登出操作
    const handleLogout = () => {
      userStore.logout();
    };
 
    return {
      userStore,
      handleLogin,
      handleLogout
    };
  }
};

这个例子展示了如何在Vue 3应用中使用Pinia来创建和管理用户登录状态。useUserStore是一个自定义的store，它包含了用户的登录状态和个人信息。在Vue组件中，我们通过setup函数来访问和操作这个store。