zustand和pinia使用比较

文章索引

🌸 这涉及到 Zustand 和 Pinia 的设计理念和机制对比。我们来详细拆解一下，看看为什么 Pinia 可以这样用，而 Zustand 需要额外的订阅函数。

🌿 1️⃣ Pinia 的使用方式

在 Vue (Pinia) 中，我们通常这样使用 store：

// 定义 store
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    user: null,
  }),
  actions: {
    setUser(user) {
      this.user = user;
    },
  },
});

// 定义 store

import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {

state: () => ({

user: null,

}),

actions: {

setUser(user) {

this.user = user;

});

在组件中使用：

const userStore = useUserStore();
userStore.setUser({ name: '张三' });
console.log(userStore.user); // 自动更新并响应式

const userStore = useUserStore();

userStore.setUser({ name: '张三' });

console.log(userStore.user); // 自动更新并响应式

✅ 为什么这样可以？

Pinia 基于 Vue 的响应式系统（Vue 的 reactive + effect 机制）。
当你调用 useUserStore() 时，返回的是一个响应式对象，类似于 Vue 的 reactive。
Vue 的响应式系统会自动追踪依赖（userStore.user），所以只要你在模板或 setup 里用过 userStore.user，它就会自动收集依赖并重新渲染。

例如：

<template>
  <div>{{ userStore.user }}</div>
</template>

<div>{{ userStore.user }}</div>

</template>

你只需要访问 userStore.user，Vue 就知道要订阅它。

🌿 2️⃣ Zustand 的设计不同

来看一下 Zustand 的设计理念：

Zustand 并不依赖 React 的响应式系统（React 没有类似 Vue 的响应式 Proxy 系统）。
Zustand 是基于订阅/发布模式（pub-sub pattern）的。
当你调用 useUserStore()，返回的是整个 store 的当前快照，并不是响应式引用。
如果你希望组件在状态变化时重新渲染，就必须明确告诉 Zustand 你关心哪个字段：

const user = useUserStore((state) => state.user);

1	const user = useUserStore((state) => state.user);

只有这样，Zustand 才会订阅 user 的变化。

所以，Zustand 的底层是「订阅机制」，Pinia 的底层是「响应式 Proxy + 依赖收集」。

🌿 3️⃣ 核心区别总结

特性/概念	Pinia	Zustand
响应式系统	基于 Vue 的响应式 Proxy 系统	没有内置响应式，基于订阅模式
获取整个 store 是否响应式	✅ 是	❌ 不是（只能获取快照）
自动依赖收集	✅ 模板/组合式 API 自动追踪	❌ 需要手动指定 (useUserStore(state => state.xxx))
用法	const store = useUserStore()，store.xxx 自动响应式	const xxx = useUserStore(state => state.xxx)
适合场景	Vue 生态专用	React 生态专用（可独立使用）

🌿 4️⃣ 为什么 Pinia 可以，Zustand 不行？

🔑 原因核心在响应式系统：

Pinia 用的是 Vue 的响应式系统（Proxy + Effect），能自动追踪依赖。
Zustand 没有响应式系统，需要你告诉它你关心什么（通过 selector 函数）。

🌿 5️⃣ 小结一图流

Pinia (Vue) --> 响应式 Proxy --> 自动依赖收集
Zustand (React) --> 订阅模式 --> 需要手动指定 selector

1 2	Pinia (Vue) --> 响应式 Proxy --> 自动依赖收集 Zustand (React) --> 订阅模式 --> 需要手动指定 selector