代碼示例：

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

核心概念解釋：

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 的設計非常適合管理需要持久化的全局界面狀態（比如用戶菜單、主題設置等），通過分離狀態邏輯使組件更專注于視圖渲染。