React 19与Vue 3.5项目从Props drilling到Zustand/Pinia的迁移实录

// stores/userStore.ts
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
import type { UserInfo, Permission } from '@/types';

interface UserState {
  user: UserInfo | null;
  permissions: Permission[];
  roles: string[];
  setUser: (user: UserInfo) => void;
  updatePermission: (perm: Permission) => void;
  // 异步action，模拟登录
  login: (token: string) => Promise;
}

export const useUserStore = create()(
  persist(
    (set, get) => ({
      user: null,
      permissions: [],
      roles: [],
      setUser: (user) => set({ user }),
      updatePermission: (perm) =>
        set((state) => ({
          permissions: state.permissions.map((p) =>
            p.id === perm.id ? perm : p
          ),
        })),
      login: async (token) => {
        // 实际请求逻辑
        const res = await fetch('/api/user', { headers: { Authorization: token } });
        const data = await res.json();
        set({ user: data.user, permissions: data.perms });
      },
    }),
    { name: 'user-storage' } // 持久化到localStorage
  )
);

// 关键：selector用法，避免无关组件重渲染
export const useUser = () => useUserStore((s) => s.user);
export const usePermissions = () => useUserStore((s) => s.permissions);

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

export const useCartStore = defineStore('cart', {
  state: () => ({
    items: [] as CartItem[],
    coupon: null as Coupon | null,
  }),
  getters: {
    totalPrice: (state) =>
      state.items.reduce((sum, item) => sum + item.price * item.quantity, 0),
    itemCount: (state) => state.items.length,
  },
  actions: {
    async addItem(item: CartItem) {
      // 防抖处理，避免重复添加
      if (this.items.some((i) => i.id === item.id)) {
        await this.updateQuantity(item.id, item.quantity + 1);
        return;
      }
      this.items.push(item);
    },
    removeItem(id: string) {
      this.items = this.items.filter((i) => i.id !== id);
    },
  },
});

// 迁移后：直接消费Store
function ProfileCard() {
  // 只订阅user字段，其他字段变化不会触发此组件重渲染
  const user = useUser();
  const updatePermission = useUserStore((s) => s.updatePermission);

  return (

      {user?.name}


  );
}

import { storeToRefs } from 'pinia';
import { useCartStore } from '@/stores/cart';

const cartStore = useCartStore();
// 关键：storeToRefs保证解构后的属性仍是响应式
const { totalPrice, itemCount } = storeToRefs(cartStore);

// 修复方案：使用shallow比较
import { shallow } from 'zustand/shallow';

const user = useUserStore((s) => s.user, shallow);
// 或者使用useShallow钩子
import { useShallow } from 'zustand/react/shallow';

const { user, permissions } = useUserStore(
  useShallow((s) => ({ user: s.user, permissions: s.permissions }))
);

const { items, totalPrice } = useCartStore();