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 构建复杂应用时的疑问,欢迎提出。我可以提供更加全面的指导与建议。