前端状态管理方案对比：Redux、Zustand 与 Pinia

2.2 RTK Query：内置的数据获取方案

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

// 定义 API Slice
export const pokemonApi = createApi({
  reducerPath: 'pokemonApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
  endpoints: (builder) => ({
    getPokemonByName: builder.query({
      query: (name) => `pokemon/${name}`,
    }),
  }),
});

// 自动生成 Hooks
export const { useGetPokemonByNameQuery } = pokemonApi;

2.3 适用场景

✅ 推荐使用 Redux Toolkit 的场景：

• 团队规模 10+ 人，需要严格的状态管理规范
• 需要时间旅行调试、状态持久化等企业级功能
• 大量使用异步数据获取（RTK Query 非常强大）
• 需要与 Redux DevTools 深度集成

❌ 不建议使用的场景：

• 个人项目或原型快速验证
• 状态逻辑非常简单的小型应用

三、Zustand：轻量级状态管理的黑马

3.1 极简的 API 设计

// store.ts - 创建状态管理
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

const useBearStore = create((set) => ({
  bears: 0,
  increase: () => set((state) => ({ bears: state.bears + 1 })),
  decrease: () => set((state) => ({ bears: state.bears - 1 })),
  removeAllBears: () => set({ bears: 0 }),
}));

export default useBearStore;

3.2 在组件中使用

// 组件中使用 - 极简！
function BearCounter() {
  // 只订阅需要的字段，避免不必要的重渲染
  const bears = useBearStore((state) => state.bears);
  return <h1>{bears} bears around here...</h1>;
}

function Controls() {
  const increase = useBearStore((state) => state.increase);
  const decrease = useBearStore((state) => state.decrease);
  return (
    <div>
      <button onClick={increase}>one up</button>
      <button onClick={decrease}>one down</button>
    </div>
  );
}

3.3 适用场景

✅ 强烈推荐 Zustand 的场景：

• 中小型 React 应用（5-50 个组件需要共享状态）
• 追求极简代码，快速原型开发
• 需要灵活的中间件扩展（持久化、日志、防抖等）
• 不想被 Redux 的样板代码束缚

四、Pinia：Vue3 生态的最佳选择

4.1 为什么选 Pinia？

Pinia 是 Vue 官方推荐的状态管理方案，完美适配 Vue3 Composition API。

// stores/counter.ts
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

// 使用组合式 API 风格
export const useCounterStore = defineStore('counter', () => {
  // State
  const count = ref(0);
  const name = ref('Eduardo');

  // Getters (使用 computed)
  const doubleCount = computed(() => count.value * 2);

  // Actions
  function increment() {
    count.value++;
  }
  function decrement() {
    count.value--;
  }

  return { count, name, doubleCount, increment, decrement };
});

4.2 在组件中使用

<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <p>Double: {{ counter.doubleCount }}</p>
    <button @click="counter.increment()">+</button>
    <button @click="counter.decrement()">-</button>
  </div>
</template>
<script setup lang="ts">
import { useCounterStore } from '@/stores/counter';
const counter = useCounterStore();
</script>

4.3 适用场景

✅ Pinia 的最佳实践：

• Vue3 项目首选 - 官方维护，文档完善
• 需要完整的 TypeScript 支持
• 需要服务端渲染（SSR）支持
• 希望保持代码的可维护性和可测试性

五、方案对比与选型建议

5.1 性能对比

5.2 选型决策树

• Vue3 项目 → 选 Pinia ✅
• React 大型项目 → Redux Toolkit ✅
• React 中小型项目 → Zustand ✅
• 需要服务端数据管理 → TanStack Query ✅

六、2025 年前端状态管理趋势

趋势 1：轻量化和模块化

越来越多的开发者倾向于选择体积小、API 简单的方案。

趋势 2：原子化状态管理的兴起

Jotai、Recoil 等原子化方案正在获得关注。

趋势 3：服务端状态管理独立化

React Query / TanStack Query 等专注于服务端数据获取和缓存。

总结

最终建议：

• 不要过度设计，简单的应用不需要复杂的状态管理
• 优先考虑团队熟悉度，其次才是技术优劣
• 保持开放心态，根据项目规模灵活选择