Zustand

Zustand 是一个小型、快速且可扩展的状态管理解决方案。Zustand 有一个基于 hook 的舒适 API。它不是样板的或固执己见的，而是有足够的约定俗成的明确和流动的。

为了更好的在浏览器控制台查看状态数据，需要安装浏览器 zustand 插件

下面是一个使用zustand 的示例，包括状态数据定义与修改，使用typescript 声明。同时实现本地持久储存。

import { create } from 'zustand'
import { persist, createJSONStorage } from 'zustand/middleware'
import { devtools } from 'zustand/middleware'

interface VideoState {
  config: { playbackRate: number }
  setConfig: (field: 'playbackRate', value: any) => void
}

export const useVideoStore = create<VideoState>()(devtools(
  persist(
    (set, get) => ({
      config: {
        //播放速度
        playbackRate: 1
      },
      setConfig: (field: string, value: any) => set(state => ({ config: { ...state.config, [field]: value } }))
    }),
    {
      name: 'video-storage',
      //默认是localStorage
      // storage: createJSONStorage(() => sessionStorage),
      //哪些状态不需要持久化
      // partialize: (state) =>
      //  Object.fromEntries(
      //    Object.entries(state).filter(([key]) => !['foo'].includes(key)),
      //  ),
    },
  )),
)

Zustand ​

Zustand