zustand-pub 中文文档教程

Question

zustand-pub

????基于 zustand for React/Vue 的跨应用/跨框架状态管理和共享。

官方文档

能力

适合模块化、组件化、微前端等业务场景，提供跨应用程序和框架的状态管理和共享功能。

安装

npm install zustand-pub # or yarn add zustand-pub

使用

步骤1：初始化状态隔离容器pubStore（App A）

import PubStore from 'zustand-pub'

const pubStore = new PubStore('key')

步骤2：向隔离容器pubStore填充数据< code>platformStore（App A）

//react
import create from "zustand";

// vue
// import create from "zustand-vue";

interface IState {
  appInfo: {
    name: string
  }
}

interface IAction {
  setAppName: (val: string) => void
}

const platformStore = pubStore.defineStore<IState & IAction>('platformStore', (set) => ({
  appInfo: { name: '' },
  setAppName(val: string) {
    set({
      appInfo: {
        name: val
      }
    })
  }
}))

const usePlatformStore = create(platformStore)

返回值usePlatformStore为hook，可以通过state selector获取对应的状态

// react
function AppA() {
  const name = usePlatformStore((state) => state.appInfo.name);
  const setAppName = usePlatformStore((state) => state.setAppName);
  return <div>{name}</div>
}

第3步：获取隔离容器 pubStore 下的 platformStore 并绑定组件（App B）

interface IState {
  appInfo: {
    name: string
  }
}

interface IAction {
  setAppName: (val: string) => void
}

// react
import PubStore from "zustand-pub";
import create from "zustand";
const pubStore = new PubStore('key')

// vue
// import PubStore from "zustand-pub";
// import create from "zustand-vue";
// const pubStore = new PubStore('key')


const store = pubStore.getStore<IState & IAction>("platformStore");
const usePlatformStore = create(store || {});

// react
function AppB() {
  const name = usePlatformStore((state) => state.appInfo.name);
  const setAppName = usePlatformStore((state) => state.setAppName);
  return <div>{name}</div>
}

:::tip Vue绑定组件的用法 :::

API

PubStore(str)

用于创建状态隔离容器，不同隔离容器内的数据key可以重名且互不影响

:::tip 在同一应用程序中，key 保持不变，并且 pubStore 返回不变 :::

const pubStore = new PubStore() 

DefineStore(key,fn)

用于将数据填充到隔离容器中

:::tip 在同一个应用中，key不变，定义的store会按照加载的顺序合并，

即defineStore(key,()=>({ a:1})) DefineStore(key,()=>({b:2})) 的工作方式类似于 defineStore(key,()=>({a:1,b:2 })) :::

参数	描述	类型
关键	数据 唯一标识符	字符串
fn	回调	(set, get) => Object

interface IStore {
  ...
}

// usePlatformStore is `hook`, and the corresponding state can be obtained through state `selector`
const usePlatformStore = pubStore.defineStore<IStore>('platformStore', (set, get) => ({}))

getStore(key)

用于从隔离容器中获取数据

参数	描述	类型
key	数据唯一标识符	字符串

const platformStore = pubStore.getStore("platformStore");

返回值 platformStore 可用于创建 hook

import create from "zustand";

//vue
// import create from "zustand-vue";

const usePlatformStore = create(platformStore || {});