如何使用Zustand复制状态对象并同步Firestore登录用户数据？

你的问题在于当前的setUser方法没有使用从Firebase获取到的用户数据，只是把现有状态里的字段重新赋值了一遍，自然无法同步新数据。下面是正确的实现方式：

1. 正确的setUser方法实现 #

修改你的store，让setUser接收从Firebase获取的用户对象作为参数，直接更新状态：

const userStore = create(set => ({
  user: {
    uid: "",
    name: "",
    phone: "",
    email: "",
    city: "",
    state: "",
    friends: "",
    firstLogin: 1,
    likes: {},
  },
  // 接收firebase返回的userData参数
  setUser: (userData) => set(() => ({ user: userData }))
}))

如果Firebase返回的用户对象可能缺少某些字段，你可以用对象合并的方式保留原有状态的默认值：

setUser: (userData) => set((state) => ({ 
  user: { ...state.user, ...userData } 
}))

2. 调用setUser同步数据 #

当你从Firestore获取到用户数据后，直接调用这个方法即可：

// 假设从Firestore获取到的用户数据是firebaseUser
const firebaseUser = await firestore.collection('users').doc(uid).get().then(doc => doc.data());
userStore.getState().setUser(firebaseUser);
// 或者在组件内用useStore调用
const setUser = useUserStore(state => state.setUser);
setUser(firebaseUser);

3. 实现状态持久化 #

如果需要让用户状态在整个应用中持久化（比如页面刷新后不丢失），可以使用Zustand的persist中间件：

首先安装依赖：

npm install @zustand/persist

然后修改store配置：

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

const userStore = create(persist(
  (set) => ({
    user: {
      uid: "",
      name: "",
      phone: "",
      email: "",
      city: "",
      state: "",
      friends: "",
      firstLogin: 1,
      likes: {},
    },
    setUser: (userData) => set(() => ({ user: userData }))
  }),
  {
    name: 'user-storage', // 本地存储的key
    storage: localStorage, // 用localStorage持久化，也可以用sessionStorage
  }
));

这样用户状态会自动保存到本地存储，页面刷新后会自动恢复。

内容的提问来源于stack exchange，提问作者akore128