Vue3状态管理--pinia

以下是针对 Vue3 状态管理的详细教程，重点讲解 Pinia 的核心用法，并与 Vuex 4 进行全方位对比分析。教程基于 2025 年最新技术生态，结合实战代码示例，帮助开发者快速掌握两种状态管理方案的核心差异与最佳实践。

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。

pinia是针对vue3推出的状态管理工具，状态管理，简单来说就是一个存储数据的地方，存放在pinia中的数据在各个组件中都能访问到，它是Vue生态中重要的组成部分。

一、Pinia 核心用法详解

1. 环境配置与初始化

安装命令：

npm install pinia@latest

初始化配置（main.ts）：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')

2. Store 定义与使用

定义计数器 Store（stores/counter.ts）：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++
    },
    async asyncIncrement() {
      await new Promise(resolve => setTimeout(resolve, 1000))
      this.count++
    }
  }
})

组件集成（Composition API）：

<script setup>
import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'

const counterStore = useCounterStore()
const { count, doubleCount } = storeToRefs(counterStore)
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double: {{ doubleCount }}</p>
    <button @click="counterStore.increment">+1</button>
    <button @click="counterStore.asyncIncrement">Async +1</button>
  </div>
</template>

3. 高级功能

• 持久化存储：通过 pinia-plugin-persistedstate 插件实现
• 模块化架构：按业务拆分 Store（用户/商品/购物车模块）
• TypeScript 强化：接口定义与严格类型检查

二、Vuex 4 核心用法回顾

1. 基础配置

安装命令：

npm install vuex@next

Store 定义示例（store/index.ts）：

import { createStore } from 'vuex'

export default createStore({
  state: () => ({ count: 0 }),
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    asyncIncrement({ commit }) {
      setTimeout(() => commit('increment'), 1000)
    }
  },
  getters: {
    doubleCount: (state) => state.count * 2
  }
})

2. 组件集成

<script>
import { mapState, mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapActions(['asyncIncrement'])
  }
}
</script>

三、Pinia vs Vuex 4 核心对比

四、迁移与选型建议

1. 新项目选型

• 推荐 Pinia：更轻量、更符合 Vue3 开发范式，官方推荐方案
• Vuex 适用场景：需要严格遵循 Flux 模式的大型遗留项目

2. 迁移策略

1. 依赖升级：npm install pinia@latest
2. 逐步替换：使用官方迁移工具 pinia-migration
3. 代码改造：
   • 将 createStore 改为 defineStore
   • 删除 mutations，直接通过 actions 修改状态
   • 使用 storeToRefs 替代 mapState

五、实战案例：电商购物车（Pinia 实现）

// stores/cart.ts
export const useCartStore = defineStore('cart', {
  state: () => ({
    items: [] as CartItem[],
    discount: 0.9
  }),
  getters: {
    totalPrice: (state) => 
      state.items.reduce((sum, item) => sum + item.price * item.quantity, 0),
    finalPrice: (state) => state.totalPrice * state.discount
  },
  actions: {
    addItem(item: Product) {
      const existing = this.items.find(i => i.id === item.id)
      existing ? existing.quantity++ : this.items.push({ ...item, quantity: 1 })
    }
  }
})

六、总结

Pinia 优势：

• 更简洁的 API 设计与更优的 TS 支持
• 组合式 API 深度整合，符合现代开发趋势
• 性能优化显著（内存占用降低 30%）

Vuex 4 价值：

• 严格的单向数据流控制
• 成熟的生态系统与社区支持
• 适合需要严格架构规范的大型团队

根据 Vue 官方路线图，Pinia 已成为 Vue3 状态管理的首选方案。建议新项目直接采用 Pinia，存量 Vue3 项目可逐步迁移，而 Vue2 项目继续使用 Vuex 3/Vuex 4 兼容版本。