编辑“︁Pinia状态管理”︁

{{DISPLAYTITLE:Pinia状态管理}}  
'''Pinia状态管理'''是[[Vue.js]]生态中推荐的现代化状态管理库，专为组合式API设计，提供类型安全、模块化架构和响应式状态管理能力。作为[[Vuex]]的继任者，Pinia简化了状态管理逻辑，同时保持强大的开发体验。  

== 核心概念 ==  
Pinia的核心设计围绕以下概念构建：  

=== 1. Store（存储） ===  
Store是Pinia的核心单元，包含状态（state）、动作（actions）和计算属性（getters）。每个Store是一个独立模块，通过组合式API管理数据流。  

{{syntaxhighlight|lang=javascript|line=  
// 定义Store示例  
import { defineStore } from 'pinia'  

export const useCounterStore = defineStore('counter', {  
  state: () => ({ count: 0 }),  
  actions: {  
    increment() {  
      this.count++  
    }  
  },  
  getters: {  
    doubleCount: (state) => state.count * 2  
  }  
})  
}}  

=== 2. 响应式状态 ===  
Pinia的状态是深度响应式的，直接修改状态或通过`$patch`批量更新均触发视图更新：  

{{syntaxhighlight|lang=javascript|line=  
// 修改状态示例  
const store = useCounterStore()  
store.count = 5          // 直接赋值  
store.$patch({ count: 10 }) // 批量更新  
}}  

=== 3. 组合式API集成 ===  
Pinia完美支持Vue 3的组合式API，可在`setup()`中直接使用：  

{{syntaxhighlight|lang=javascript|line=  
<script setup>  
import { useCounterStore } from './stores/counter'  
const store = useCounterStore()  
</script>  

<template>  
  <button @click="store.increment">{{ store.doubleCount }}</button>  
</template>  
}}  

== 实际应用案例 ==  
以下是一个电商购物车的实现示例：  

{{syntaxhighlight|lang=javascript|line=  
// stores/cart.js  
export const useCartStore = defineStore('cart', {  
  state: () => ({  
    items: [],  
    discount: 0.1  
  }),  
  getters: {  
    totalPrice(state) {  
      return state.items.reduce(  
        (sum, item) => sum + item.price * item.quantity, 0  
      ) * (1 - state.discount)  
    }  
  },  
  actions: {  
    addItem(product) {  
      const existing = this.items.find(item => item.id === product.id)  
      existing ? existing.quantity++ : this.items.push({ ...product, quantity: 1 })  
    }  
  }  
})  
}}  

== 与Vuex的对比 ==  
{| class="wikitable"  
! 特性 !! Pinia !! Vuex  
|-  
| API设计 || 组合式API优先 || 选项式API为主  
|-  
| 类型支持 || 一流的TypeScript集成 || 需要额外配置  
|-  
| 模块化 || 自动代码分割 || 需要手动注册模块  
|-  
| 体积 || 约1KB (gzipped) || 约10KB (gzipped)  
|}  

== 高级用法 ==  
=== 插件系统 ===  
通过插件扩展Store功能，例如持久化存储：  

{{syntaxhighlight|lang=javascript|line=  
// 持久化插件示例  
function persistPlugin(context) {  
  const key = `pinia-${context.store.$id}`  
  const savedState = localStorage.getItem(key)  
  if (savedState) context.store.$patch(JSON.parse(savedState))  

  context.store.$subscribe((mutation, state) => {  
    localStorage.setItem(key, JSON.stringify(state))  
  })  
}  
}}  

=== 服务端渲染(SSR) ===  
Pinia原生支持SSR，需在服务端和客户端分别初始化：  

{{syntaxhighlight|lang=javascript|line=  
// server.js  
export default {  
  install(app) {  
    const pinia = createPinia()  
    app.use(pinia)  
  }  
}  
}}  

== 性能优化 ==  
Pinia的响应式系统基于Vue 3的`reactive`，可通过以下方式优化：  
* 使用`$patch`批量更新状态  
* 避免在getters中进行复杂计算  
* 对大型列表使用`shallowRef`  

<mermaid>  
graph LR  
  A[组件] -->|调用| B[Store Actions]  
  B -->|更新| C[State]  
  C -->|触发| D[Getters]  
  D -->|返回| A  
</mermaid>  

== 数学表达 ==  
对于状态派生值的计算，可表示为：  
<math>  
\text{total} = \sum_{i=1}^{n} (price_i \times quantity_i) \times (1 - discount)  
</math>  

== 总结 ==  
Pinia通过简洁的API设计解决了Vue状态管理的常见痛点，特别适合中大型应用。其核心优势包括：  
* 零配置的类型安全  
* 开发工具集成  
* 模块热更新(HMR)支持  
* 与Vue DevTools深度整合  

初学者可从基础Store模式入手，逐步掌握插件和SSR等高级特性，构建可维护的前端架构。

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Pinia状态管理]]