How to save multiple data in localStorage with zustand?

在使用zustand状态管理库时，将状态持久化到localStorage中是一种常见的需求，尤其是在多个数据项需要存储时。我将分步说明如何实现此功能，并提供一个具体的实现示例。

第一步：创建 Zustand 状态库

首先，我们需要创建一个使用zustand的状态库。假设我们要存储用户信息和主题偏好：

javascript
import create from 'zustand';

const useStore = create(set => ({
  userInfo: { name: 'John Doe', email: 'john@example.com' },
  theme: 'dark',
  setUserInfo: (userInfo) => set({ userInfo }),
  setTheme: (theme) => set({ theme })
}));

第二步：实现状态持久化

为了将状态保存到localStorage，我们可以利用zustand中间件。zustand提供了一个名为persist的中间件，可以用来自动将状态存储到localStorage中。

首先，你需要安装zustand持久化中间件：

bash
npm install zustand@next

然后，修改我们的状态库以使用persist中间件：

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

const useStore = create(persist((set) => ({
  userInfo: { name: 'John Doe', email: 'john@example.com' },
  theme: 'dark',
  setUserInfo: (userInfo) => set({ userInfo }),
  setTheme: (theme) => set({ theme })
}), {
  name: 'user-settings', // localStorage 中的键名称
  getStorage: () => localStorage // 指定使用 localStorage
}));

第三步：使用 Zustand 状态

你可以在你的React组件中使用这个状态，例如更新和读取：

javascript
import React from 'react';
import useStore from './store';

function App() {
  const { userInfo, theme, setUserInfo, setTheme } = useStore();

  return (
    <div>
      <h1>User Info</h1>
      <p>Name: {userInfo.name}</p>
      <p>Email: {userInfo.email}</p>
      <button onClick={() => setUserInfo({ name: 'Jane Doe', email: 'jane@example.com' })}>
        Update User Info
      </button>

      <h1>Theme</h1>
      <p>Current Theme: {theme}</p>
      <button onClick={() => setTheme('light')}>
        Change Theme
      </button>
    </div>
  );
}

export default App;

总结

通过zustand的persist中间件，我们可以很容易地实现多个数据项的持久化。这种方法既简洁又高效，非常适合在现代React应用程序中使用，以实现跨会话的状态管理。