Vue中Pinia和Vuex有什么区别该用哪个

Vue 中 Pinia 和 Vuex 有什么区别？该用哪个？

一句话总结：Pinia 是 Vue 3 官方推荐的状态管理库，比 Vuex 更轻、更简洁、TypeScript 支持更好。新项目直接 Pinia，老项目逐步迁移，别犹豫！

正文目录

1. Pinia 和 Vuex 的核心区别
2. 5 大高频踩坑场景 & 迁移代码
3. 万能兜底：Pinia 标准 Store 模板
4. 预防 checklist（不再踩坑）
5. 一句话总结

一、Pinia 和 Vuex 的核心区别

一句话：Pinia 砍掉了 mutations，每个 Store 独立定义，setup 语法天然支持，TS 类型自动推断。新项目无脑选 Pinia。

二、5 大高频踩坑场景 & 迁移代码

① Vuex 习惯：修改 state 必须走 mutations

// ❌ Vuex 习惯：修改 state 必须写 mutationconststore={state:()=>({count:0}),mutations:{increment(state){state.count++;}},actions:{asyncIncrement({commit}){commit('increment');// ❌ Pinia 不需要 commit}}};// 组件里this.$store.commit('increment');// ❌ Pinia 没有 commit

修复：Pinia 直接改 state，actions 里直接操作

// ✅ Pinia：直接改，不需要 mutationsimport{defineStore}from'pinia';exportconstuseCounterStore=defineStore('counter',{state:()=>({count:0}),actions:{increment(){this.count++;// ✅ 直接改，不需要 commit},asyncIncrement(){this.count++;// ✅ action 里也可以直接改}}});// 组件里constcounter=useCounterStore();counter.increment();// ✅ 直接调counter.count=10;// ✅ 也可以直接改

② Vuex 模块嵌套太深，取数据一长串

// ❌ Vuex 模块嵌套：取数据路径太长conststore={modules:{user:{modules:{profile:{state:()=>({name:'张三'}),namespaced:true}}}}};// 组件里this.$store.state.user.profile.name;// ❌ 路径太长this.$store.commit('user/profile/setName','李四');// ❌ 命名空间拼接

修复：Pinia 每个 Store 独立，扁平化

// ✅ Pinia：每个 Store 独立定义exportconstuseUserStore=defineStore('user',()=>{constname=ref('张三');constsetName=(val)=>{name.value=val;};return{name,setName};});// 组件里直接用constuserStore=useUserStore();userStore.name;// ✅ 直接访问userStore.setName('李四');// ✅ 直接调用

③ 用 setup 语法时 Vuex 类型推断差

// ❌ Vuex + TypeScript：类型推断差，需要大量断言import{useStore}from'@/store';conststore=useStore();constcount=store.state.count;// ❌ 类型是 anyconstuser=store.state.user.nameasstring;// ❌ 手动断言

修复：Pinia 自动类型推断

// ✅ Pinia：自动类型推断import{useUserStore}from'@/stores/user';constuserStore=useUserStore();userStore.name;// ✅ 自动推断 stringuserStore.setName('李四');// ✅ 参数类型自动校验

// ✅ setup 风格的 Storeimport{defineStore}from'pinia';import{ref,computed}from'vue';exportconstuseUserStore=defineStore('user',()=>{constname=ref<string>('张三');constage=ref<number>(18);constinfo=computed(()=>`${name.value},${age.value}岁`);constsetName=(val:string)=>{name.value=val;};return{name,age,info,setName};});

④ Pinia 持久化：刷新后状态丢失

// ❌ Pinia 默认不持久化，刷新页面状态丢失exportconstuseUserStore=defineStore('user',()=>{consttoken=ref('');constlogin=(t)=>{token.value=t;};return{token,login};});// 刷新页面 → token 变回空字符串 ❌

修复方案一：手动 localStorage

// ✅ 在 action 里手动存exportconstuseUserStore=defineStore('user',()=>{consttoken=ref(localStorage.getItem('token')||'');constlogin=(t)=>{token.value=t;localStorage.setItem('token',t);// ✅ 存};constlogout=()=>{token.value='';localStorage.removeItem('token');// ✅ 清};return{token,login,logout};});

修复方案二：用 pinia-plugin-persistedstate 插件

// ✅ 插件自动持久化import{createPinia}from'pinia';importpiniaPluginPersistedstatefrom'pinia-plugin-persistedstate';constpinia=createPinia();pinia.use(piniaPluginPersistedstate);// ✅ 全局注册// Store 里声明 persistexportconstuseUserStore=defineStore('user',{state:()=>({token:'',user:null}),persist:true,// ✅ 自动持久化整个 state});

⑤ Pinia 解构丢失响应式

<!-- ❌ 解构后丢失响应式 --> <script setup> import { useUserStore } from '@/stores/user'; const userStore = useUserStore(); const { name, age } = userStore; // ❌ 解构后不是响应式的 </script> <template> <div>{{ name }}</div> <!-- ❌ name 变了页面不更新 --> </template>

修复：用 storeToRefs

<!-- ✅ 用 storeToRefs 解构，保持响应式 --> <script setup> import { storeToRefs } from 'pinia'; import { useUserStore } from '@/stores/user'; const userStore = useUserStore(); const { name, age } = storeToRefs(userStore); // ✅ 响应式保留 // actions 可以直接解构（函数不需要响应式） const { setName } = userStore; </script> <template> <div>{{ name }}</div> <!-- ✅ name 变了页面更新 --> </template>

三、万能兜底：Pinia 标准 Store 模板

Option 风格（类似 Vuex，适合简单 Store）：

import{defineStore}from'pinia';exportconstuseCounterStore=defineStore('counter',{state:()=>({count:0,history:[],}),getters:{double:(state)=>state.count*2,historyLength:(state)=>state.history.length,},actions:{increment(){this.count++;this.history.push('+1');},decrement(){this.count--;this.history.push('-1');},reset(){this.count=0;this.history=[];},},});

Setup 风格（Composition API，推荐）：

import{defineStore}from'pinia';import{ref,computed}from'vue';exportconstuseUserStore=defineStore('user',()=>{// stateconstuser=ref(null);consttoken=ref('');// gettersconstisLoggedIn=computed(()=>!!token.value);constuserName=computed(()=>user.value?.name||'游客');// actionsconstlogin=async(credentials)=>{constres=awaitfetch('/api/login',{method:'POST',body:JSON.stringify(credentials),});constdata=awaitres.json();token.value=data.token;user.value=data.user;};constlogout=()=>{token.value='';user.value=null;};constupdateUser=(patch)=>{user.value={...user.value,...patch};};return{// stateuser,token,// gettersisLoggedIn,userName,// actionslogin,logout,updateUser,};});

组件里使用：

<script setup> import { storeToRefs } from 'pinia'; import { useUserStore } from '@/stores/user'; const userStore = useUserStore(); // ✅ 响应式数据用 storeToRefs const { user, token, isLoggedIn, userName } = storeToRefs(userStore); // ✅ actions 直接解构 const { login, logout, updateUser } = userStore; // ✅ 也可以直接用 $patch 批量更新 const updateProfile = () => { userStore.$patch({ user: { name: '新名字' } }); }; // ✅ $reset 重置（仅 Option 风格支持） const resetAll = () => userStore.$reset(); </script>

四、预防 checklist

• 新项目直接用 Pinia，不要用 Vuex
• Pinia没有 mutations，actions 里直接this.xxx = val修改 state
• 每个 Store独立定义，不需要 modules 嵌套
• 组件里解构 Store 数据必须用 storeToRefs，否则丢失响应式
• actions/methods可以直接解构，函数不需要响应式
• 持久化用 pinia-plugin-persistedstate插件，或手动 localStorage
• 推荐用setup 风格定义 Store（Composition API，TS 支持更好）
• 跨 Store 调用：在 action 里useOtherStore()即可
• $patch批量更新比逐个赋值性能更好
• $reset()只在 Option 风格 Store 中可用，setup 风格需手动实现

五、一句话总结

「Pinia = 更轻更直觉的 Vuex」。砍掉 mutations、扁平化 Store、setup 语法原生支持、TS 自动推断。新项目无脑 Pinia，解构用 storeToRefs，持久化用插件。状态管理就该这么简单！

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作

📚 《Vue.js 3企业级项目开发实战（微课视频版》