关于前端:基于zustand维护的一套跨框架reactvue跨应用的状态管理及共享方案

28次阅读

共计 1711 个字符，预计需要花费 5 分钟才能阅读完成。

只有从事前端开发，不论是小程序还是 web，都绕不开状态治理。\
家喻户晓，zustand 是一套轻量、便捷、可拓展的状态治理计划，不管国内 or 国外，都备受青睐，star 数已靠近 3W。

而 zustand-pub 则基于 zustand 为 Iframe、微前端、Module Fedetation、模块化、组件化 等业务场景，提供 跨利用、跨框架 的 状态治理 及 状态共享 能力。

利用 / 组件间能够 互相调用 / 批改 state，并 触发组件渲染 , 如果你是 iframe，则能够摈弃掉难保护的postMessage + addeventlistener + action 了，如果你是微前端，也不在须要 eventCenter + action 了，间接调用 action 批改 state 即可。
利用 / 组件间 状态能够被缓存，包含 iframe、微前端等。
平时咱们在业务组件援用全局 store 时会导致夸利用无奈复用的问题，升高了组件的可复用性，而基于 zustand-pub 则不会再存在此类问题，复用性与开发效率并存。
基于 devtools 能够 同时调试 / 追踪多个利用间的 store，可能极大地升高利用间通信时的调试难度。
如果你正在应用 zustand 或 zustand-vue，那么应用 zustand-pub 将很简略。

不同利用间基于批改指标利用的状态更新视图，也能够跨利用获取状态。不再须要保护 postmessage 或事件核心。

iframe
微前端

在 npm\umd\module federation 组件库中间接应用利用状态 \
业务组件库中，咱们对于利用全局状态的援用还是比拟频繁的，如 是否登陆 / 用户信息 等。这些信息如果基于组件 props 进行传参，在组件层级比拟深的状况下，须要一层一层往下传，并且如果字段有减少或删除，也须要批改多层组件，

所以最现实的计划是间接从 store 中获取

import create from "zustand";

const useUserInfo = create<IState & IAction>((set) => ({userInfo: { name: ''},
  setUserInfoName(val: string) {
    set({
      userInfo: {name: val}
    })
  }
}))

const name = useUserInfo((state) => state.userInfo.name);

但此计划 useUserInfo 往往是跟着利用走的，在组件库中咱们是无奈应用的。

为此，能够援用 zustand-pub 对useUserInfo进行小小的改变:

import PubStore from 'zustand-pub'

import create from "zustand";

const pubStore = new PubStore('appKey')


const userInfoStore = pubStore.defineStore<<IState & IAction>>('userInfo',(set) => ({userInfo: { name: ''},
  setUserInfoName(val: string) {
    set({
      userInfo: {name: val}
    })
  }
}))

const useUserInfo = create(userInfoStore)
const name = useUserInfo((state) => state.userInfo.name);

npm\umd\module federation 组件库下应用

import PubStore from "zustand-pub";
const pubStore = new PubStore('appKey')
const store = pubStore.getStore<IState & IAction>("userInfo");
const useUserInfo = create(userInfoStore)
const name = useUserInfo((state) => state.userInfo.name)

这里以 react 举例，如果你的利用是 vue，也能够基于 zustand-vue 进行应用。

正文完