Pinia存储用户状态

1. Pinia 和 Vuex 有什么区别？为什么本项目选择了 Pinia？

答案：
Pinia 是 Vue 官方推荐的状态管理库，和 Vuex 相比，Pinia 更加轻量、API 更加简洁，支持 TypeScript 更友好，且与 Vue3 的 Composition API 深度集成。在本项目中，web-admin/src/store/ 目录下采用了 Pinia 进行全局状态管理，比如用户信息、菜单、主题等。Pinia 的模块化和类型推断能力让我们在管理如用户登录状态、权限菜单等复杂状态时更加高效和易维护。

---

2. 如何在 Pinia 中存储和管理用户登录状态？请结合项目举例说明。

答案：
在本项目中，可以在 web-admin/src/store/modules/user.ts（假设有该文件，若没有可在 index.ts 扩展）中定义用户状态的 store。例如：

import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    token: '',
    userInfo: null,
  }),
  actions: {
    setToken(token) {
      this.token = token;
    },
    setUserInfo(info) {
      this.userInfo = info;
    },
    logout() {
      this.token = '';
      this.userInfo = null;
    }
  }
});

在登录后，调用 setToken 和 setUserInfo 存储用户信息，实现全局可用的用户状态。

---

3. 如何在组件中访问和修改 Pinia 中的用户状态？

答案：
在 Vue 组件中，可以通过 useUserStore 访问和修改用户状态。例如在 web-admin/src/views/Login.vue 登录成功后：

import { useUserStore } from '@/store/modules/user';

const userStore = useUserStore();
userStore.setToken(response.token);
userStore.setUserInfo(response.userInfo);

这样，其他组件如 TopHeader.vue、SideMenu.vue 也可以通过同样方式访问用户信息，实现如显示用户名、权限菜单等功能。

---

4. Pinia 的状态如何持久化？在本项目中如何实现刷新页面后用户状态不丢失？

答案：
Pinia 本身不自带持久化功能，但可以结合插件如 pinia-plugin-persistedstate 实现状态持久化。在本项目中，可以在 store/index.ts 引入该插件：

import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

然后在用户 store 中配置 persist: true，这样用户 token、userInfo 就会自动存储到 localStorage，页面刷新后依然保留登录状态。

---

5. 如何结合 Pinia 实现权限控制？本项目是如何做的？

答案：
本项目通过 Pinia 存储用户信息和权限菜单（如 store/modules/menu.ts），在路由守卫（router/index.ts）中根据用户状态和权限判断是否允许访问某些页面。例如：

router.beforeEach((to, from, next) => {
  const userStore = useUserStore();
  if (!userStore.token && to.path !== '/login') {
    next('/login');
  } else {
    // 检查权限菜单
    next();
  }
});

这样结合 Pinia 的全局状态和路由守卫，实现了基于用户状态的权限控制。