Vue进阶实战09，替代Vuex：Pinia入门与核心特性（Vue3推荐）-编程阁

在Vue生态中，状态管理一直是核心需求之一。曾经，Vuex作为官方推荐的状态管理库，陪伴了无数Vue开发者度过项目开发的时光。但随着Vue3的全面普及，一款更轻量、更简洁、更贴合Vue3特性的状态管理库——Pinia，逐渐成为了主流选择，甚至被官方明确推荐为Vue3项目的状态管理方案。今天，我们就来全面聊聊Pinia的入门使用与核心特性，看看它为何能取代Vuex成为Vue3的新宠。

一、为什么是Pinia？—— 取代Vuex的核心原因

在了解Pinia之前，我们先搞清楚一个关键问题：为什么需要用Pinia替代Vuex？这不仅仅是“新库替代旧库”的简单迭代，更核心的是Pinia解决了Vuex在Vue3生态下的诸多痛点：

简化的API设计：Vuex的核心概念（State、Mutation、Action、Getter、Module）虽然清晰，但也带来了一定的心智负担，尤其是Mutation的“必须同步”规则，在实际开发中常常显得繁琐。而Pinia彻底移除了Mutation，将状态修改逻辑统一到Action中，同时简化了Getter的使用，API更加简洁直观。
完美适配Vue3特性：Pinia是基于Vue3的Composition API构建的，天然支持响应式语法、setup函数等，与Vue3的开发风格无缝契合。而Vuex虽然也支持Vue3，但本质上还是为Options API设计的，在Composition API中使用会显得有些别扭。
更好的TypeScript支持：Pinia从设计之初就充分考虑了TypeScript的类型推导，不需要额外编写大量的类型声明，就能实现完美的类型提示。而Vuex的TypeScript支持一直比较薄弱，需要开发者手动维护复杂的类型定义，开发体验较差。
更轻量的体积：Pinia的打包体积仅约1KB，远小于Vuex（约10KB），对于追求极致性能的项目来说，是更好的选择。
移除Module概念，灵活组织状态：Vuex中为了实现状态的模块化拆分，需要使用Module，还存在命名空间、模块嵌套等复杂概念。而Pinia中没有Module，而是通过创建多个Store来实现状态的拆分，每个Store都是独立的，组织方式更加灵活。

二、Pinia快速入门——从安装到使用

接下来，我们通过一个简单的示例，快速掌握Pinia的基本使用流程。

2.1 安装Pinia

Pinia的安装非常简单，通过npm或yarn即可完成：

# npmnpminstallpinia# yarnyarnaddpinia

2.2 创建Pinia实例并挂载到Vue应用

安装完成后，我们需要在Vue应用的入口文件（如main.js）中创建Pinia实例，并通过app.use()方法挂载到应用上：

// main.jsimport{createApp}from'vue'import{createPinia}from'pinia'importAppfrom'./App.vue'// 创建Pinia实例constpinia=createPinia()// 创建Vue应用并挂载Piniaconstapp=createApp(App)app.use(pinia)app.mount('#app')

这一步类似于Vuex中创建Store实例并挂载，是使用Pinia的基础。

2.3 定义Store

在Pinia中，状态是通过“Store”来管理的。我们可以使用Pinia提供的defineStore()函数来定义一个Store。defineStore()接收两个参数：

第一个参数：Store的唯一标识（字符串），用于在应用中区分不同的Store，不能重复。
第二个参数：一个配置对象，包含State、Getters、Actions等核心属性。

示例：定义一个管理用户状态的Store（src/stores/user.js）：

// src/stores/user.jsimport{defineStore}from'pinia'// 定义并导出Store，唯一标识为"userStore"exportconstuseUserStore=defineStore('userStore',{// 状态：存储应用的状态数据state:()=>({username:'张三',age:25,isLogin:false}),// 计算属性：基于State派生的状态，类似Vuex的Getter和Vue的computedgetters:{// 计算用户信息描述userInfoDesc:(state)=>{return`${state.username}，${state.age}岁，${state.isLogin?'已登录':'未登录'}`}},// 方法：用于修改State、处理异步逻辑，类似Vuex的Action（Pinia中无Mutation）actions:{// 登录方法：修改isLogin状态login(){this.isLogin=true// 直接通过this访问state中的属性},// 异步方法：模拟从接口获取用户信息asyncfetchUserInfo(){// 模拟接口请求constres=awaitnewPromise((resolve)=>{setTimeout(()=>{resolve({username:'李四',age:28})},1000)})// 修改状态this.username=res.usernamethis.age=res.agethis.isLogin=true}}})

2.4 在组件中使用Store

定义好Store后，我们就可以在Vue组件中导入并使用它了。在Vue3的setup函数或

<script setup> // 导入定义好的Store import { useUserStore } from '@/stores/user' // 创建Store实例（注意：useUserStore是一个函数，调用后返回Store实例） const userStore = useUserStore() </script> <template> <div> <h3>用户信息</h3> <p>用户名：{{ userStore.username }}</p> <p>年龄：{{ userStore.age }}</p> <p>登录状态：{{ userStore.isLogin ? '已登录' : '未登录' }}</p> <p>用户描述：{{ userStore.userInfoDesc }}</p> <button @click="userStore.login">登录</button> <button @click="userStore.fetchUserInfo">异步获取用户信息</button> </div> </template>

从上面的示例可以看出，Pinia在组件中的使用非常直观：直接导入Store函数，调用后得到实例，然后就可以通过实例访问State、Getters，调用Actions了。

三、Pinia核心特性详解

了解了基本使用后，我们再深入剖析Pinia的核心特性，帮助大家更好地应对复杂项目的开发需求。

3.1 State——状态的定义与修改

State是Store中存储状态数据的核心部分，在Pinia中，State通过一个返回对象的函数来定义（类似Vue3的data选项），这样可以确保每次创建Store时都能返回一个新的状态对象，避免状态污染。

3.1.1 直接修改State

与Vuex不同，Pinia允许直接在组件中修改State，不需要通过Mutation：

<script setup> import { useUserStore } from '@/stores/user' const userStore = useUserStore() // 直接修改State中的属性 const changeUsername = () => { userStore.username = '王五' } </script>

3.1.2 使用$patch批量修改State

如果需要同时修改多个State属性，可以使用Store实例的$patch方法，通过对象或函数的方式批量修改，更加高效：

// 方式1：对象形式（适合修改少量属性）userStore.$patch({username:'赵六',age:30,isLogin:true})// 方式2：函数形式（适合修改逻辑复杂的场景，可访问state参数）userStore.$patch((state)=>{state.username='赵六'state.age=30state.isLogin=true// 甚至可以进行数组操作// state.list.push({ id: 1, name: '测试' })})

3.1.3 重置State

如果需要将State恢复到初始状态，可以使用Store实例的$reset()方法：

// 重置State为初始值userStore.$reset()

3.2 Getters——派生状态的计算

Getters相当于Store的计算属性，用于基于State派生新的状态。它的使用方式与Vue的computed非常相似，具有缓存特性：只有当依赖的State属性发生变化时，Getters才会重新计算。

3.2.1 基本使用

Getters是一个对象，其中的每个属性都是一个函数，函数接收state作为参数，返回计算后的值：

getters:{// 基本计算doubleAge:(state)=>{returnstate.age*2},// 依赖其他GettersuserInfoWithDoubleAge:(state,getters)=>{return`${state.username}，年龄的2倍是${getters.doubleAge}`}}

在组件中使用时，直接通过Store实例访问Getters属性即可（不需要调用，因为它是计算属性）：

<template> <p>年龄的2倍：{{ userStore.doubleAge }}</p> <p>用户信息（含2倍年龄）：{{ userStore.userInfoWithDoubleAge }}</p> </template>

3.2.2 传递参数给Getters

如果需要给Getters传递参数，可以让Getters返回一个函数，通过函数参数接收外部值：

getters:{// 返回一个函数，接收参数getAgeByCondition:(state)=>(minAge)=>{returnstate.age>=minAge?'符合条件':'不符合条件'}}

组件中使用：

<template> <p>年龄是否符合18岁要求：{{ userStore.getAgeByCondition(18) }}</p> <p>年龄是否符合30岁要求：{{ userStore.getAgeByCondition(30) }}</p> </template>

注意：这种方式会失去Getters的缓存特性，每次调用都会重新计算。

3.3 Actions——状态修改与异步逻辑处理

Actions是Store中用于处理业务逻辑的方法，它可以修改State、执行异步操作（如接口请求），是Pinia中处理状态变更的核心方式（取代了Vuex的Action和Mutation）。

3.3.1 同步Actions

同步Actions的使用非常简单，直接在Actions中通过this访问State并修改即可：

actions:{// 同步修改状态incrementAge(){this.age++},// 接收参数setUsername(name){this.username=name}}

组件中调用：

<script setup> const userStore = useUserStore() userStore.incrementAge() // 调用同步Action userStore.setUsername('孙七') // 传递参数 </script>

3.3.2 异步Actions

对于异步逻辑（如接口请求），Actions可以直接使用async/await语法，非常直观：

actions:{// 异步获取用户信息asyncfetchUserInfo(){try{// 模拟接口请求constres=awaitfetch('/api/user')constdata=awaitres.json()// 修改状态this.username=data.usernamethis.age=data.agethis.isLogin=true}catch(error){console.error('获取用户信息失败：',error)}}}

组件中调用异步Action时，也可以使用await等待其完成：

<script setup> const userStore = useUserStore() const handleFetchUser = async () => { await userStore.fetchUserInfo() console.log('用户信息获取完成') } </script>

3.4 多Store的使用——状态的模块化拆分

Pinia中没有Module的概念，而是通过创建多个Store来实现状态的模块化拆分。每个Store都是独立的，负责管理某一块特定的状态（如用户状态、商品状态、购物车状态等）。

示例：定义一个商品Store（src/stores/goods.js）：

// src/stores/goods.jsimport{defineStore}from'pinia'exportconstuseGoodsStore=defineStore('goodsStore',{state:()=>({goodsList:[],currentGoodsId:null}),actions:{// 异步获取商品列表asyncfetchGoodsList(){constres=awaitfetch('/api/goods')constdata=awaitres.json()this.goodsList=data.list},// 设置当前选中的商品IDsetCurrentGoodsId(id){this.currentGoodsId=id}}})

在组件中同时使用多个Store：

<script setup> import { useUserStore } from '@/stores/user' import { useGoodsStore } from '@/stores/goods' // 创建两个Store实例 const userStore = useUserStore() const goodsStore = useGoodsStore() // 调用不同Store的Action const initData = async () => { await userStore.fetchUserInfo() await goodsStore.fetchGoodsList() } initData() </script>

这种方式相比Vuex的Module更加灵活，每个Store可以独立维护，降低了代码的耦合度。

3.5 组合式Store——复用状态逻辑

借助Vue3的Composition API，Pinia支持将多个Store的逻辑组合在一起，实现状态逻辑的复用。例如，我们可以创建一个通用的“分页Store”，然后在其他Store中复用它的逻辑。

示例：创建通用分页逻辑（src/composables/usePagination.js）：

// src/composables/usePagination.jsexportconstusePagination=()=>{conststate={page:1,pageSize:10,total:0}constactions={setPage(page){state.page=page},setPageSize(pageSize){state.pageSize=pageSize},setTotal(total){state.total=total}}return{...state,...actions}}

在商品Store中复用分页逻辑：

import{defineStore}from'pinia'import{usePagination}from'@/composables/usePagination'exportconstuseGoodsStore=defineStore('goodsStore',{state:()=>({goodsList:[],currentGoodsId:null,// 复用分页状态...usePagination()}),actions:{// 复用分页方法...usePagination().actions,// 异步获取商品列表（结合分页）asyncfetchGoodsList(){constres=awaitfetch(`/api/goods?page=${this.page}&pageSize=${this.pageSize}`)constdata=awaitres.json()this.goodsList=data.listthis.setTotal(data.total)// 调用复用的方法}}})

通过这种方式，我们可以将通用的状态逻辑抽取出来，在多个Store中复用，提高代码的可维护性。

四、Pinia与Vuex的核心差异对比

为了让大家更清晰地了解Pinia和Vuex的区别，这里整理了一份核心差异对比表：

特性	Pinia	Vuex
核心概念	State、Getters、Actions（无Mutation、Module）	State、Mutation、Action、Getter、Module
状态修改	直接修改State或通过Actions修改，无同步限制	必须通过Mutation修改State（同步），异步逻辑在Action中
TypeScript支持	原生完美支持，类型推导清晰	支持较差，需要手动编写大量类型声明
Vue3适配度	基于Composition API构建，完美适配	为Options API设计，在Composition API中使用繁琐
体积	约1KB，轻量	约10KB，较重
模块化方式	多个独立的Store	Module（支持命名空间、嵌套）
官方推荐	Vue3官方推荐	Vue2官方推荐，Vue3中不推荐

五、总结与最佳实践

通过以上内容的介绍，我们可以得出一个明确的结论：对于Vue3项目，Pinia是优于Vuex的状态管理方案。它不仅简化了API设计，降低了心智负担，还完美适配了Vue3的Composition API和TypeScript，让状态管理变得更加简单、高效。

最后，给大家分享一些Pinia的最佳实践建议：

按功能拆分Store：每个Store负责管理一个特定功能模块的状态（如用户、商品、购物车），避免创建一个庞大的全局Store。
优先使用Actions处理状态修改：虽然Pinia允许直接修改State，但在实际开发中，建议将状态修改逻辑统一放在Actions中，这样可以更好地维护代码、方便调试和测试。
合理使用Getters缓存派生状态：对于需要多次使用的派生状态，使用Getters可以避免重复计算，提高性能。
借助Composition API复用逻辑：将通用的状态逻辑抽取为组合式函数，在多个Store中复用，提高代码的可维护性和复用性。
使用TypeScript开发：Pinia的TypeScript支持非常优秀，使用TypeScript可以获得更好的开发体验和代码健壮性。

如果你正在使用Vue3开发项目，不妨尝试一下Pinia，相信它会给你带来全新的状态管理体验！