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
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核心概念解释：
-
defineStore：
-
Pinia 的核心方法，用于创建 Store
-
第一个参数是 Store 的唯一名称
-
第二个参数是 setup 函数，用组合式 API 编写
-
第三个参数是配置对象，这里启用了持久化
-
-
ref：
-
Vue 的响应式 API，用于创建响应式数据
-
ref<Menu[]>表示这是一个存储 Menu 类型数组的响应式引用 -
通过
.value访问/修改值（但在模板中会自动解包，不需要 .value）
-
-
类型系统：
-
Menu是自定义类型（来自 @/interface） -
TypeScript 泛型
<Menu[]>确保数据类型的正确性
-
-
方法功能：
-
setMenu：更新当前菜单
-
removeMenu：清空所有菜单数据
-
setPastMenu：更新历史菜单
-
-
持久化配置：
-
{ 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();
新手需要注意：
-
响应式规则：
-
在 JS 中修改状态需要使用
.value -
在模板中直接使用变量名即可
-
-
Store 的生命周期：
-
单例模式：整个应用共享同一个 Store 实例
-
持久化数据会一直保留，直到手动清除或用户清除浏览器缓存
-
-
类型安全：
-
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.value; // 现在是一个响应式 ref方案 3：直接操作 Store 属性（推荐）
import useProgressCtrlStore from "../stores";const progressCtrlStore = useProgressCtrlStore();// 在模板中直接使用：
<el-tableref="table":data="progressCtrlStore.applyBasicInfoListData":border="true"highlight-current-rowstyle="width: 100%; height: 100%"@row-click="onTableRowClick">// 在 JS 中访问：
progressCtrlStore.applyBasicInfoListData.map(...)不同数据类型的具体表现：
| 数据类型 | 直接赋值结果 | 正确响应式方案 |
|---|---|---|
| 基本类型 (string/number) | ❌ 失去响应性 | 使用 computed 或 ref |
| 响应式数组 (reactive) | ✅ 保持内容响应性* | 推荐使用 storeToRefs |
| 响应式对象 (reactive) | ✅ 保持属性响应性* | 推荐保持原始引用 |