Pinia Store · 雜談

[TOC] # Pinia Store ## 概括了 Pinia 的核心概念與用法 | 概念 | 作用 | 用法 | |---------| ------------------------ | -----------------| | State | 存儲數據 | state: () => ({ count: 0 })| |Getters | 從 State 派生數據 |getters: { doubleCount() { return this.count * 2 }}| |Actions |處理異步操作 |actions: { increment() { setTimeout(() => { this.count++ }, 1000) }}| |Mutations| 更改 State 的唯一方法 |mutations: { increment() { this.count++ }}| |defineStore| 定義 Store |export const useCounter = defineStore({<br> state: () => ... <br> getters: ..., <br> actions: ..., <br> mutations: ...<br>})| 構建邊界: - 必須安裝 pinia 依賴 - 創建 Store 文件,如 store/user.js - 使用 defineStore() 定義 Store - 在 Store 中設置 state、getters、actions 和 mutations - 在根組件或入口文件中安裝使用該 Store 開發流程: 1. 安裝 `pinia: npm install pinia` 2. 創建 store/user.js 文件: ``` js import { defineStore } from 'pinia' export const useUserStore = defineStore({ // store id id: 'user', // state state: () => ({ name: 'Evan' }), // getters getters: { doubleName() { return this.name + this.name } }, // actions actions: { setName(name) { this.name = name } }, // mutations mutations: { CHANGE_NAME(state, name) { state.name = name } } }) ``` 3. 在 src/main.js 中安裝 Store: ``` js import { createPinia } from 'pinia' import { useUserStore } from '@/store/user' const pinia = createPinia() app.use(pinia) ``` 4. 在組件中使用該 Store: ``` js export default { setup() { const user = useUserStore() user.name user.doubleName user.setName('Jack') } } ``` 示例使用: 使用 Pinia 的 Table Store,可以構建一個簡單表格: ``` js // TableStore.js export const useTableStore = defineStore({ state: () => ({ tableData: [ { id: 1, name: 'Jack' }, { id: 2, name: 'John' } ] }), getters: { tableRows() { return this.tableData.map(row => ` <tr> <td>${row.id}</td> <td>${row.name}</td> </tr> `).join('') } } }) ``` 在組件中: ``` html <table> <tbody> <tr v-html="tableRows" />  </tbody> </table> <script> import { useTableStore } from '@/store/TableStore' export default { setup() { const table = useTableStore() return { tableRows: table.tableRows } } } </script> ``` ## Pinia 支持一些比較高級的使用法,可以構建更加復雜和強大的狀態管理。主要有以下幾點: ### 1. 嵌套 Store :在一個 Store 中使用其他 Store,構建層級關系。 ``` js // store/user.js import { useAddressStore } from './address' export const useUserStore = defineStore({ state: () => ({ // 使用 address Store address: useAddressStore() }), // ... }) ``` ### 2. 模塊化 Store :將一個 Store 分割為多個模塊,更加清晰。 ``` js // store/user.js export const userStore = defineStore({ state: () => ({ ... }), modules: { info: { state: () => ({ ... }), getters: { ... }, actions: { ... } }, prefs: { // ... } } }) ``` ### 3. 網絡狀態管理在 Store 中添加 state.isLoading 等屬性,統一管理網絡狀態。 ``` js export const userStore = defineStore({ state: () => ({ isLoading: false, user: null, error: null }), actions: { async getUser() { this.isLoading = true this.error = null try { const res = await fetchUser() this.user = res.data } catch (err) { this.error = err } finally { this.isLoading = false } } } }) ``` ### 4. 訪問其他 Store :在 action 或 mutation 中,可以訪問其他 Store 并觸發方法。 ``` js // store/user.js import { cartStore } from './cart' export const userStore = defineStore({ actions: { checkout() { // 訪問 cartStore 并調用其方法 cartStore.placeOrder() } } }) ``` ### 5. 訂閱 Store 更新 :在其他組件或 Store 中,可以訂閱某個 Store 的更新。 ``` js // 訂閱 userStore const unsubscribe = userStore.subscribe( // 回調函數,當 userStore 更新時被調用 () => { /** ... **/ } ) // 取消訂閱 unsubscribe() ``` 掌握 Pinia 這些高級用法,可以讓我們構建出模塊化、可擴展和健壯的狀態管理解決方案。如果您遇到使用 Pinia 構建復雜應用時的疑問,歡迎提出。我可以提供更加全面的指導與建議。