以前

登录后获得：

{
  "token": "abc123",
  "nickName": "张三"
}

// 获取到token后存储到sessionStorage
sessionStorage.setItem("token", token)

然后每个页面：

const token = sessionStorage.getItem("token")

如果在某个页面修改了：

sessionStorage.setItem("nickName", "李四")

我的页面是不会刷新的（除非重新渲染，再走一遍读取的逻辑）

现在

而 Zustand 的作用则类似于 Vue 的双向绑定，一处修改，处处生效。

安装

npm install zustand

创建

src/store/user.ts

import { create } from 'zustand'

export const useUserStore = create((set) => ({
  token: '',

  setToken: (token: string) => {
    set({
      token,
    })
  },
}))

先不要管语法，就记住这里放全局变量。

使用

登录成功后：

useUserStore.getState().setToken(
  'abc123'
)

读取

// 会响应状态变化、会触发组件重新渲染
const token = useUserStore(state => state.token)

// 不会响应状态变化、不会触发组件重新渲染
// const token = useUserStore.getState().token

修改

useUserStore
  .getState()
  .setToken(token)

持久化

默认情况下，关闭小程序，Zustand 的数据会数据没了，持久化需用使用 persist()

import { persist }
from 'zustand/middleware'

export const useUserStore =
  create(
    persist(
      (set) => ({
        token: '',
        setToken: (token) =>
          set({ token }),
      }),
      {
        name: 'user-store',
      }
    )
  )

最佳实践

创建用户状态 src/store/user.ts

import { create } from 'zustand'

export const useUserStore = create(
  (set) => ({
	// 定义状态（State） 与java bean类似属性
    token: '',
    userInfo: null,

	// 定义操作（Action）  与java的set函数类似
    setToken: (token) =>
      set({
        token,
      }),

    setUserInfo: (userInfo) =>
      set({
        userInfo,
      }),

    logout: () =>
      set({
        token: '',
        userInfo: null,
      }),
  })
)