前端状态管理选型：Redux、Zustand 与 Pinia 对比

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

对于异步数据，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;

适用场景

✅ 推荐使用：

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

❌ 不建议使用：

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

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

极简的 API 设计

Zustand 没有 Provider 包裹，也没有复杂的 Action/Reducer 概念，直接通过 Hook 访问状态。

// 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;

在组件中使用

这里的关键是只订阅需要的字段，避免不必要的重渲染。

// 组件中使用 - 极简！
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>
  );
}

适用场景

✅ 强烈推荐：

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

Pinia：Vue3 生态的最佳选择

为什么选 Pinia？

Pinia 是 Vue 官方推荐的状态管理方案，完美适配 Vue3 Composition API，去掉了 Vuex 中的 Mutation 概念。

// 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 };
});

在组件中使用

配合 <script setup> 语法糖，使用体验非常流畅。

<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>

适用场景

✅ 最佳实践：

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

方案对比与选型建议

性能对比

选型决策树

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

2025 年前端状态管理趋势

1. 轻量化和模块化：开发者倾向于体积小、API 简单的方案。
2. 原子化状态管理的兴起：Jotai、Recoil 等原子化方案正在获得关注。
3. 服务端状态管理独立化：React Query / TanStack Query 专注于服务端数据获取和缓存。

总结

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