React 19与Vue 3.5下从Props钻取到Zustand/Pinia的状态重构实录

// stores/userStore.ts
import { create } from 'zustand';
import { devtools } from 'zustand/middleware';

interface UserFilterParams {
  keyword: string;
  role: 'admin' | 'editor' | 'viewer' | null;
  status: 'active' | 'disabled' | null;
  page: number;
  pageSize: number;
}

interface UserStore {
  filterParams: UserFilterParams;
  userList: Array>;
  isLoading: boolean;
  setFilterParams: (partial: Partial) => void;
  fetchUserList: () => Promise;
}

export const useUserStore = create()(
  devtools(
    (set, get) => ({
      filterParams: {
        keyword: '',
        role: null,
        status: null,
        page: 1,
        pageSize: 20,
      },
      userList: [],
      isLoading: false,

      // 关键点：使用 partial 更新，不直接覆盖整个对象
      setFilterParams: (partial) => {
        set((state) => ({
          filterParams: { ...state.filterParams, ...partial },
        }));
      },

      fetchUserList: async () => {
        set({ isLoading: true });
        try {
          const { filterParams } = get();
          // 模拟API请求
          const response = await fetch(`/api/users?page=${filterParams.page}&size=${filterParams.pageSize}`);
          const data = await response.json();
          set({ userList: data.list });
        } finally {
          set({ isLoading: false });
        }
      },
    }),
    { name: 'UserStore' } // devtools中间件用于调试
  )
);

// 改造前（噩梦）
interface UserActionCellProps {
  filterParams: UserFilterParams;
  onUpdateFilter: (params: UserFilterParams) => void;
  onRefresh: () => void;
  // ...还有另外8个props
}

// 改造后（清晰）
import { useUserStore } from '../stores/userStore';

export const UserActionCell = () => {
  // 订阅具体字段，而非整个Store
  const page = useUserStore((state) => state.filterParams.page);
  const pageSize = useUserStore((state) => state.filterParams.pageSize);
  const fetchUserList = useUserStore((state) => state.fetchUserList);

  const handleNextPage = () => {
    // 不需要从props回调，直接调用Store方法
    useUserStore.getState().setFilterParams({ page: page + 1 });
    fetchUserList();
  };

  return (

      第 {page} 页
      下一页
      {/* 其他操作 */}

  );
};

// stores/config.ts
import { defineStore } from 'pinia';

export const useConfigStore = defineStore('config', {
  state: () => ({
    sidebarCollapsed: false,
    themeMode: 'light' as 'light' | 'dark',
    tableDensity: 'comfortable' as 'comfortable' | 'compact' | 'tight',
  }),

  getters: {
    // 派生状态
    isDarkMode: (state) => state.themeMode === 'dark',
  },

  actions: {
    toggleSidebar() {
      this.sidebarCollapsed = !this.sidebarCollapsed;
    },

    // 异步Action
    async loadUserPreference() {
      const saved = await localStorage.getItem('user-pref');
      if (saved) {
        const parsed = JSON.parse(saved);
        this.$patch({ ...parsed }); // $patch批量更新
      }
    },
  },
});

import { storeToRefs } from 'pinia';
import { useConfigStore } from '@/stores/config';

const configStore = useConfigStore();
// 关键：使用 storeToRefs 解构保持响应性
const { tableDensity } = storeToRefs(configStore);

// 计算表格尺寸
const tableSize = computed(() => {
  if (tableDensity.value === 'compact') return 'small';
  if (tableDensity.value === 'tight') return 'mini';
  return 'default';
});

// 切换密度操作
const changeDensity = (density: 'comfortable' | 'compact' | 'tight') => {
  configStore.$patch({ tableDensity: density });
};

import { useShallow } from 'zustand/react/shallow';
const { filterParams, userList } = useUserStore(
  useShallow((state) => ({ filterParams: state.filterParams, userList: state.userList }))
);

actions: {
  reset() {
    this.$patch({
      sidebarCollapsed: false,
      themeMode: 'light',
      tableDensity: 'comfortable',
    });
  }
}

let requestSeq = 0;
fetchUserList: async () => {
  const currentSeq = ++requestSeq;
  set({ isLoading: true });
  const data = await fetch(...);
  if (currentSeq === requestSeq) {
    set({ userList: data.list });
  }
}