React 19与Vue 3.5跨框架状态管理迁移：从Context/Props到Zustand与Pinia的工程实践

// 旧代码：Context + useReducer，每次setState都会导致所有消费者重渲染
const AppContext = createContext}>(null!);

export const AppProvider = ({children}: {children: ReactNode}) => {
  const [state, dispatch] = useReducer(reducer, initialState);
  const value = useMemo(() => ({state, dispatch}), [state]);
  return {children};
};

// 消费组件（每次翻页，即使只用pagination，filter组件也会重渲染）
function ListPage() {
  const { state, dispatch } = useContext(AppContext);
  // 页面所有state变化都触发这里
}

// 新代码：Zustand + 选择性订阅
import { create } from 'zustand';
import { subscribeWithSelector } from 'zustand/middleware';

interface ListState {
  filter: Filter;
  pagination: { page: number; pageSize: number };
  selectedRows: string[];
  // actions
  setFilter: (filter: Filter) => void;
  fetchList: () => Promise;
}

export const useListStore = create()(
  subscribeWithSelector((set, get) => ({
    filter: { keyword: '', status: 'all' },
    pagination: { page: 1, pageSize: 20 },
    selectedRows: [],
    setFilter: (filter) => set({ filter }),
    fetchList: async () => {
      const { pagination, filter } = get();
      const data = await api.fetchList({ ...pagination, ...filter });
      set({ list: data });
    },
  }))
);

// 消费组件：只订阅pagination，filter变化不会触发重渲染
function PaginationBar() {
  const page = useListStore((s) => s.pagination.page);
  const pageSize = useListStore((s) => s.pagination.pageSize);
  const fetchList = useListStore((s) => s.fetchList);
  // 只有page/pageSize变化才重渲染
}

import { useShallow } from 'zustand/react/shallow';

// 同时订阅多个字段时，用useShallow避免每次render都产生新对象
const { filter, pagination } = useListStore(
  useShallow((s) => ({ filter: s.filter, pagination: s.pagination }))
);

const state = reactive({
  user: null,
  permissions: [],
  theme: 'light'
});
provide('appState', state);
// 子组件通过 inject('appState') 修改，无人约束

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

export const useAppStore = defineStore('app', () => {
  // state（用ref定义）
  const user = ref(null);
  const permissions = ref([]);
  const theme = ref('light');

  // getters（用computed）
  const isAdmin = computed(() => permissions.value.includes('admin'));

  // actions（异步方法）
  async function login(username: string, password: string) {
    const { user: u, permissions: p } = await api.login({ username, password });
    user.value = u;
    permissions.value = p;
  }

  function toggleTheme() {
    theme.value = theme.value === 'light' ? 'dark' : 'light';
  }

  return { user, permissions, theme, isAdmin, login, toggleTheme };
});

import { useAppStore } from '@/stores/app';
import { storeToRefs } from 'pinia';

const appStore = useAppStore();
// 关键：用storeToRefs解构才能保持响应性，且不会丢失引用
const { user, isAdmin } = storeToRefs(appStore);
// actions直接解构，无需storeToRefs
const { login, toggleTheme } = appStore;

import { persist, createJSONStorage } from 'zustand/middleware';

export const useAuthStore = create(
  persist(
    (set) => ({ token: '', setToken: (t) => set({ token: t }) }),
    {
      name: 'auth-storage',
      version: 2, // 必须显式版本，之前默认0，升级后报错
      storage: createJSONStorage(() => localStorage),
      partialize: (state) => ({ token: state.token }), // 只持久化token
    }
  )
);

// plugins/reset.ts
export function resetPlugin({ store }) {
  const initialState = JSON.parse(JSON.stringify(store.$state));
  store.$reset = () => {
    store.$patch(initialState);
  };
}
// main.ts
pinia.use(resetPlugin);