Pinia状态管理

在根目录创建一个store文件夹，里面创建js、ts文件

如果把state比作实体类的属性（如 user 的 name、age），actions比作实体类的方法（如修改属性的 setAge、执行业务逻辑的 login），那么getters可以理解为实体类中带缓存的 “计算属性方法”—— 它依赖属性（state）计算出新的值，并且只会在依赖变化时重新计算。

- **getters**：用于基于 state 的**派生状态**（如过滤、统计、格式化等），且这个派生状态可能被多次使用（比如在组件模板、其他 getters 中）。利用缓存可以避免重复计算，提升性能。

- **方法（actions 或普通函数）**：适合处理**不需要缓存的逻辑**（如单次计算、带参数的动态过滤），或包含**副作用的操作**（如请求接口、修改 state）。

---

// 导入 defineStore 函数，用于定义 Pinia 存储
import { defineStore } from 'pinia';
// 导入 ref 函数，用于创建响应式数据
import { ref } from 'vue';

/**
 * defineStore 参数描述：
 * - 'token'：给状态起名，存储的唯一标识符，用于在应用中引用该存储
 * - () => ({... })：一个函数，用于定义存储的内容和操作
 */
export const useTokenStore = defineStore('token', () => {
    // 使用 ref 创建一个响应式的 token 变量，初始值为空字符串
    const token = ref('');

    // 定义修改token的方法
    const setToken = (newToken) => {
        token.value = newToken;
    }

    // 定义移除token的方法
    const removeToken = () => {
        token.value = '';
    }

    // 返回 token 状态和操作
    return { token, setToken, removeToken };
});

本地持久化 pinia-plugin-persistedstate

npm install pinia-plugin-persistedstate

问题