TypeScript Zustand：如何对类型为 Store 的状态进行持久化

在本文中，我们将介绍如何在 TypeScript 中使用 Zustand 库来管理状态，并对类型为 Store 的状态进行持久化。Zustand 是一个简洁且强大的状态管理库，它提供了一种简单的方式来管理应用程序的状态，并且与 TypeScript 集成非常顺畅。我们将学习如何定义和使用 Store 并将其持久化保存。

阅读更多：TypeScript 教程

Zustand 简介

Zustand 是一个基于 Hook 的状态管理库，它提供了一个名为 create 函数来创建和管理状态。使用 Zustand，我们可以轻松地定义、更新和访问状态，而无需使用 Redux 或 MobX 等复杂的库。让我们看一下如何在 TypeScript 中使用 Zustand。

首先，我们需要安装 Zustand 和相关的类型声明文件：

npm install zustand
npm install @types/zustand --save-dev

定义和使用 Store

在 Zustand 中，我们使用一个函数来定义 Store。这个函数返回一个包含各种状态和方法的对象，我们可以通过这些方法来更新和访问状态。让我们看一个例子：

import createStore from 'zustand';

type User = {
  name: string;
  age: number;
};

type UserStore = {
  user: User;
  updateUser: (user: Partial<User>) => void;
};

const useUserStore = createStore<UserStore>((set) => ({
  user: { name: '', age: 0 },
  updateUser: (user) => set((state) => ({ user: { ...state.user, ...user } })),
}));

function UserInfo() {
  const { user, updateUser } = useUserStore();

  return (
    <div>
      <input
        value={user.name}
        onChange={(event) => updateUser({ name: event.target.value })}
      />
      <input
        value={user.age}
        onChange={(event) => updateUser({ age: Number(event.target.value) })}
      />
     </div>
  );
}

在上面的例子中，我们定义了一个名为 useUserStore 的 Store。这个 Store 包含一个名为 user 的状态以及一个名为 updateUser 的方法。updateUser 方法用于更新 user 状态。在 UserInfo 组件中，我们使用 useUserStore 钩子来获取 user 状态和 updateUser 方法，并将其显示在输入框中。

持久化 Store

要对类型为 Store 的状态进行持久化保存，我们可以使用 Zustand 的 persist 插件。这个插件可以将状态保存到本地存储中，并在应用程序重新加载时自动还原。让我们看一个例子：

首先，我们需要安装 persist 插件：

npm install zustand-persist

然后，我们需要在创建 Store 时使用 persist 插件：

import createStore from 'zustand';
import { persist } from 'zustand-persist';

const useUserStore = createStore(
  persist<UserStore>((set) => ({
    user: { name: '', age: 0 },
    updateUser: (user) =>
      set((state) => ({ user: { ...state.user, ...user } })),
  }), {
    name: 'userStore', // 用于区分不同的 Store
    getStorage: () => localStorage, // 指定存储方式，默认使用 localStorage
  })
);