zustand-state-tree: 一个基于 zustand 的状态管理库

同构自 pinia 语法，基于 zustand 开发的一套状态管理程序

项目主页: http://github.com/afeiship/zustand-state-tree

安装

# add zustand & immer middleware packages
yarn add zustand immer

# add zustand tree
yarn add @jswork/zustand-state-tree @jswork/scan-modules

types 文件

可以添加到 src/nx-env.d.ts 里

/// <reference types="@jswork/zustand-state-tree/global.d.ts" />

stores 目录

以下文件都是一些测试的 store 文件

.
├── fish.ts
├── layout.ts
├── nested-immer.ts
└── nested.ts

一个 store 的示例

export default nx.$defineStore({
  state() {
    return { collapsed: false };
  },
  getters: {
    width: (state) => (state.collapsed ? 80 : 200)
  },
  actions: {
    toggle: (state) => {
      state.collapsed = !state.collapsed;
    }
  },
  watch: {
    collapsed: (cur, old) => {
      console.log('cur collapsed:', cur, old);
    }
  },
  persist: {
    name: 'abc-test',
    partialize(state) {
      return {
        collapsed: state.collapsed
      };
    }
  }
});