嘿，老铁，Zui近你在ZuoVue3项目吗？说说你用的状态管理器。是不是还在用Vuex？或者听说Pinia了但不确定是不是该投进去？今天咱们就来聊聊这两个大佬。

先说一句话：单纯的props+event往往只Neng解决父子之间的数据流。你一旦要跨页面共享用户信息、购物车、主题色，就得找个地方存。那就是状态管理。

Vue官方Zui早给的答案是Vuex，但它写起来有点像“写代码也要写文档”。

于是2019年出现了Pinia，一个轻量级的替代品。它跟Composition API天然配合，语法geng直白，而且支持TS。

Vuex你得定义store，然后再写state、mutations、actions，再去注册到根实例。每一步dou要跑一遍。

Pinia只需要：

import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
  state:  => ,
  getters: {
    double:  => s.count * 2
  },
  actions: {
    inc { this.count++ }
  }
})

一句话搞定，没什么繁琐的mutation概念。对新人友好！

Vuex靠modules，你得手动把不同业务拆成模块并导入；而Pinia每个store本身就是一个模块，你Ke以随意拆，也Ke以在一个store里引另一个store，实现通信。

Ru果你直接解构state，会失去响应性。所以记得用storeToRefs：

import { storeToRefs } from 'pinia'
const { count } = storeToRefs)

先装pinia：

npm i pinia -S
# 或者
yarn add pinia

记住不要加@next，否则会拿到旧版本。

Ru果你还在使用vue-router，记得一起挂载：

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
import router from './router'
const app = createApp
app.use)
app.use
app.mount

state: 直接返回对象，用箭头函数避免SSR污染。

getters: 类似computed，有缓存功Neng，Ke以依赖其他getter。

actions: 像methods一样，可同步或异步，还Ke以调用其他store的方法实现跨模块逻辑。

$patch: 批量修改state，比直接赋值geng安全且保持响应性。

$reset/$replaceState: 快速重置或替换整个state，非常适合登录/退出场景。

$persistedState插件： 让你的数据持久化到localStorage/sessionStorage，只需一行配置即可。

// src/store/user.ts
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
  state:  => ({
    token: localStorage.getItem || '',
    profile: null // 简化
  }),
  actions: {
    async login{
      // 模拟接口
      const res = await new Promise=>resolve,500))
      this.token = res.token as string
      this.profile = res.profile as any
      localStorage.setItem
    },
    logout{
      this.token='';this.profile=null;
      localStorage.removeItem
    }
    // Ru果想一次性重置所有字段，Ke以：
    // $reset
  }
})

// src/store/cart.ts
import { defineStore } from 'pinia'
import { useUserStore } from './user'
export const useCartStore = defineStore('cart', {
   state:=>({ items:
   }),
   getters:{
     totalPrice{return state.items.reduce=>s+i.price*i.qty,0)},
     totalCount{return state.items.reduce=>s+i.qty,0)}
   },
   actions:{
     add{
       const user=useUserStore
       if{alert;return}
       const exist=this.items.find
       if{exist.qty+=item.qty}
       else{this.items.push}
     },
     remove{this.items=this.items.filter},
     clear{this.$reset}
   }
})

打开DevTools → 切到“States”标签，kan见你的stores列表；

点击任意action，可kan到调用栈与payload；

Ke以实时修改state，kan效果即时geng新—超级方便调试。

$patch接收函数时会自动触发reactive追踪；Ru果只是想改几个字段，用对象方式即可；

Avoid deep copying entire state unless really needed—it's costly.