如何使用Zustand的Persist仅持久化指定状态至localStorage？

完全可以用Zustand的Persist中间件实现这个需求，而且这比手动操作localStorage更靠谱，能自动同步状态和本地存储，不用自己写重复的存/取逻辑。

具体实现步骤 #

1. 导入zustand/middleware下的persist中间件
2. 用persist包裹你的状态仓库配置，通过partialize选项指定仅持久化user字段
3. 配置本地存储的唯一名称，避免和其他存储冲突

修改后的完整代码示例：

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

// 修正原代码语法错误，补充getUser中用到的初始状态字段
export const useAuthStore = create(
  persist(
    (set, get) => ({
      user: null,
      isError: false,
      isLoading: false,
      message: "",
      isSuccess: false,
      isLoggedIn: false,
      register: async () => {
        // some function
      },
      getUser: async () => {
        set({ isLoading: true });
        try {
          const resp = await fetch(API_URL + "/getuser", {
            method: "GET",
            credentials: "include",
          });

          const userData = await resp.json();
          if (resp.ok) {
            set({ 
              isLoading: false, 
              isSuccess: true, 
              isLoggedIn: true, 
              user: {...userData} 
            });
          }
        } catch (error) {
          console.log(error);
        }
      }
      // Some other functions below
    }),
    {
      name: "auth-storage", // 自定义本地存储的key名称
      partialize: (state) => ({ user: state.user }) // 仅持久化user字段
    }
  )
);

为什么不推荐直接操作localStorage？ #

手动操作的话，你需要每次修改user状态时都调用localStorage.setItem，还要在仓库初始化时用localStorage.getItem读取并设置初始值。这种方式很容易遗漏——比如其他地方修改user（如登录/登出）时，忘了同步到localStorage，就会出现状态不一致的问题。而Persist中间件会自动监听user的变化，帮你完成存/取操作，逻辑更简洁可靠。

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