Vue3 Pinia Store 新建store示例、使用store示例

1、新建store示例

新建store示例代码：userMenu.ts

import { defineStore } from "pinia";  // 导入 Pinia 的 defineStore 方法
import { ref } from "vue";           // 导入 Vue 的响应式 API ref
import { type Menu } from "@/interface"; // 导入自定义的 Menu 类型

// 创建一个名为 'userMenu' 的 Store
// 定义 Store: 使用 Pinia 的 Setup 语法形式（另外还有 Options 语法形式），默认不提供 $reset() 方法
const useUserMenuStore = defineStore(
  "userMenu",  // Store 的唯一标识名
  () => {      // 使用组合式 API 的 setup 函数写法
    // 1. 定义当前菜单状态（响应式引用）
    const menu = ref<Menu[]>([]);  // 创建一个存储 Menu 数组的响应式引用

    // 2. 设置菜单的方法
    const setMenu = (newMenu: Menu[]) => {
      menu.value = newMenu;  // 更新菜单数据
    };

    // 3. 清除菜单的方法
    const removeMenu = () => {
      menu.value = [];       // 清空当前菜单
      pastMenu.value = [];   // 同时清空历史菜单
    };

    // 4. 定义历史菜单状态（响应式引用）
    const pastMenu = ref<Menu[]>([]);  // 创建一个存储历史菜单的响应式引用

    // 5. 设置历史菜单的方法
    const setPastMenu = (newMenu: Menu[]) => {
      pastMenu.value = newMenu;  // 更新历史菜单数据
    };

    // 暴露所有需要外部访问的状态和方法
    return { menu, setMenu, removeMenu, pastMenu, setPastMenu };
  },
  { persist: true }  // 启用持久化插件配置（页面刷新后数据不丢失）
);

export default useUserMenuStore;  // 导出 Store

核心概念解释：

1. defineStore：

   • Pinia 的核心方法，用于创建 Store

   • 第一个参数是 Store 的唯一名称

   • 第二个参数是 setup 函数，用组合式 API 编写

   • 第三个参数是配置对象，这里启用了持久化

2. ref：

   • Vue 的响应式 API，用于创建响应式数据

   • ref<Menu[]> 表示这是一个存储 Menu 类型数组的响应式引用

   • 通过 .value 访问/修改值（但在模板中会自动解包，不需要 .value）

3. 类型系统：

   • Menu 是自定义类型（来自 @/interface）

   • TypeScript 泛型 <Menu[]> 确保数据类型的正确性

4. 方法功能：

   • setMenu：更新当前菜单

   • removeMenu：清空所有菜单数据

   • setPastMenu：更新历史菜单

5. 持久化配置：

   • { persist: true } 表示启用状态持久化

   • 需要配合 pinia-plugin-persistedstate 插件使用

   • 数据会保存在 localStorage 中，防止页面刷新丢失

使用场景示例：

javascript

// 在组件中使用
import useUserMenuStore from '@/stores/userMenu';

const menuStore = useUserMenuStore();

// 更新菜单
menuStore.setMenu([{ id: 1, name: '首页' }]);

// 获取当前菜单
console.log(menuStore.menu); 

// 清空菜单
menuStore.removeMenu();

新手需要注意：

1. 响应式规则：

   • 在 JS 中修改状态需要使用 .value

   • 在模板中直接使用变量名即可

2. Store 的生命周期：

   • 单例模式：整个应用共享同一个 Store 实例

   • 持久化数据会一直保留，直到手动清除或用户清除浏览器缓存

3. 类型安全：

   • TypeScript 的类型约束可以帮助减少错误

   • 如果传递错误类型的参数，编译时会报错

这个 Store 的设计非常适合管理需要持久化的全局界面状态（比如用户菜单、主题设置等），通过分离状态逻辑使组件更专注于视图渲染。

2、使用store示例

方案 1：使用 computed 保持响应式链接

import useProgressCtrlStore from "../stores";
import { computed } from "vue";

const progressCtrlStore = useProgressCtrlStore();
const tableData = computed(() => progressCtrlStore.applyBasicInfoListData);

方案 2：使用 Pinia 的 storeToRefs

import useProgressCtrlStore from "../stores";
import { storeToRefs } from "pinia";

const progressCtrlStore = useProgressCtrlStore();
const { applyBasicInfoListData } = storeToRefs(progressCtrlStore);
const tableData = applyBasicInfoListData; // 现在是一个响应式 ref

方案 3：直接操作 Store 属性（推荐）

import useProgressCtrlStore from "../stores";

const progressCtrlStore = useProgressCtrlStore();

// 在模板中直接使用：
<el-table
      ref="table"
      :data="progressCtrlStore.applyBasicInfoListData"
      :border="true"
      highlight-current-row
      style="width: 100%; height: 100%"
      @row-click="onTableRowClick">

// 在 JS 中访问：
progressCtrlStore.applyBasicInfoListData.map(...)

---

不同数据类型的具体表现：

数据类型	直接赋值结果	正确响应式方案
基本类型 (string/number)	❌ 失去响应性	使用 computed 或 ref
响应式数组 (reactive)	✅ 保持内容响应性*	推荐使用 storeToRefs
响应式对象 (reactive)	✅ 保持属性响应性*	推荐保持原始引用