fec-state-management

前端状态管理

用途

为前端状态确定清晰归属，避免全局 store 膨胀、重复缓存和派生状态同步错误。

流程

1. 先分类状态来源

不要先选 Redux、Zustand、Pinia 或 Context。先把每个状态标到唯一归属，再决定工具。

状态类型	典型例子	默认归属
本地 UI 状态	弹窗开关、tab、展开行、hover 编辑态	组件内 state / ref
表单状态	输入值、脏字段、校验错误、提交中	表单库或表单组件
服务端状态	列表、详情、分页结果、远程错误	请求缓存库
URL 状态	搜索词、筛选、排序、页码、选中 tab	路由参数 / search params
全局客户端状态	登录用户、主题、权限快照、购物车草稿	全局 store
浏览器持久化状态	跨刷新保留的草稿、偏好、离线队列	存储层 + 状态适配器

type ReportsStateMap = {
  search: "url";
  selectedReportId: "url";
  reports: "server-state-cache";
  isFilterPanelOpen: "local-ui";
  draftColumns: "browser-persistence";
};

2. 保持最小状态

可从 props、server state、URL 或已有 state 推导出来的值，不要另存一份。

interface Invoice {
  id: string;
  status: "draft" | "sent" | "paid";
}

function InvoiceList({ invoices }: { invoices: Invoice[] }) {
  const paidInvoices = invoices.filter((invoice) => invoice.status === "paid");

  return <span>{paidInvoices.length}</span>;
}

3. 选择 React 全局状态方案

React 中优先本地化和组合；只有跨页面、跨 feature 或需要统一动作时才引入全局 store。

import { create } from "zustand";

interface WorkspaceState {
  activeWorkspaceId: string | null;
  setActiveWorkspaceId: (workspaceId: string) => void;
}

export const useWorkspaceStore = create<WorkspaceState>((set) => ({
  activeWorkspaceId: null,
  setActiveWorkspaceId: (activeWorkspaceId) => set({ activeWorkspaceId }),
}));

决策顺序：

1. 只在一个组件或一个小子树使用：useState / useReducer。
2. 低频全局配置或依赖注入：Context。
3. 中等复杂业务状态：Zustand 或 Jotai，按仓库现有选型优先。
4. 大型应用、严格动作流、审计或时间旅行调试：Redux Toolkit。
5. 远程数据：使用数据获取 skill 管理 query key、缓存和失效策略。

4. 选择 Vue 全局状态方案

Vue 3 中，局部跨层级传递使用 provide/inject；全局业务状态使用 Pinia 或项目既有 store。

import { computed, readonly, ref } from "vue";
import { defineStore } from "pinia";

export const useSessionStore = defineStore("session", () => {
  const userId = ref<string | null>(null);
  const isSignedIn = computed(() => userId.value !== null);

  function signIn(nextUserId: string) {
    userId.value = nextUserId;
  }

  return {
    userId: readonly(userId),
    isSignedIn,
    signIn,
  };
});