Zustand和Pinia的对比（谁更好用）

先给结论没有绝对更好只看你用什么框架、项目规模、开发需求Vue项目无脑pinia官方原生、生态、调试全拉满React项目Zustand几乎全方位吊打旧方案比Pinia更适配React两者框架互不通Pinia是Vue专属Zustand跨框架React、vue、原生JS都能用1、基础信息Zustand和Pinia对比ZustandPinia所属框架跨框架react首选、vue、原生js通用vue专属包体积极小~1.2kb~3kbAPI极简度极致极简无Provider,无Reducer,无Mutation简洁比vuex简单但概念更多state、getter、actionts类型原生完美类型推导几乎不用手动写类型优秀vue生态TS友好更新方式set()直接该状态写法极短直接修改stateaction封装vue响应式原生调试工具支持devTools,够用Vue DevTools深度集成调试体验顶级模块化多store原生天然拆分非常灵活模块化完善官方规范模块拆分中间件极强持久化中间件选择器钱比较内置内置基础能力持久化需插件生态插件丰富学习成本极低10分钟上手低vue开发者零成本从vuex迁移2、具体使用Zustand一、安装npm install zustand #持久化插件token存在localStorage,刷新不丢失必装 npm install zustand-persist二、store文件封装 src/store/userStore.tsimport {creact} from zustand; import {persist} from zustand-persist; //1.定义store数据类型 interface UserState{ token:string userInfo:{ username:string userId:number } //方法 //设置token setToken:(token:string)void //设置用户信息 setUserInfo:(info:UserState[userInfo])void //退出登录清空所有数据 logout:()void } //2.zustand封装持久化自动存储 export const useUserStorecreateUserState()( persist( (set)({ token:, userInfo:null, //设置token setToken:(token){ set({token}) }, //设置用户信息 setUserInfo:(userInfo){ set({userInfo}) }, //退出登录-一键清空 logout:(){ set({ token:, userInfo:null }) } }), { //持久化配置 key:user_store,//localstorage key名字 storage:localStorage,//存储位置 }, ) )三、页面存储import { useUserStore } from /store/userStore function LoginPage() { // 解构获取数据和方法 const { token, userInfo, setToken, setUserInfo, logout } useUserStore() // 模拟登录接口请求成功后 const handleLogin async () { // 假设接口返回 const res { token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9, user: { userId: 1001, username: 前端用户 } } // 存入全局状态 自动持久化到本地 setToken(res.token) setUserInfo(res.user) } return ( div div当前token{token}/div button onClick{handleLogin}模拟登录/button button onClick{logout}退出登录/button /div ) } export default LoginPage四、取出调用重点知识点useUserStore.getState()非 React 组件、非 hooks 环境万能调用axios、工具函数里通用// src/utils/request.ts axios封装 import axios from axios import { useUserStore } from /store/userStore const service axios.create({ baseURL: import.meta.env.VITE_BASE_URL }) // 请求拦截器 携带token service.interceptors.request.use((config) { // 直接调用获取无需hooks无需组件内 const token useUserStore.getState().token if (token) { config.headers.Authorization Bearer ${token} } return config }) export default servicePinia一、安装npm install pinia二、封装import { defineStore } from pinia export const useUserStore defineStore(user, { state: () ({ token: , userInfo: null }), actions: { setToken(token) { this.token token }, setUserInfo(info) { this.userInfo info }, logout() { this.token this.userInfo null } }, persist: true })三、存储const functionSubmit (res) { if (res.data.code 200 res.data.status) { let token res.data.data.token;//根据后端返回的格式自定义 let userInfo res.data.data.userInfo; //重要是这两个 userStore.setToken(questTicket); userStore.setUserInfo(userInfo); } };四、使用import { useUserStore } from /stores/index.js; // 确保路径正确 //使用 const userStore useUserStore();两者对比总结代码量Zustand 略少一点点但差距不大上手难度Zustand 概念更少只有state set修改没有 mutation、没有 getter跨组件 / 非组件调用PiniauseUserStore().xxxZustand组件内 hooks非组件getState()非常顺手框架归属Pinia 只属于 VueZustand 只属于 React 生态首选千万不要在 Vue 用 Zustand也不要在 React 硬用 Pinia