zustand-pub
只有从事前端开发，不论是小程序还是web，都绕不开状态治理。\
家喻户晓， zustand 是一套轻量、便捷、可拓展的状态治理计划，不管国内 or 国外，都备受青睐，star 数已靠近 3W。
而 zustand-pub 则基于zustand为 Iframe、微前端、Module Fedetation、模块化、组件化 等业务场景，提供 跨利用、跨框架 的 状态治理 及 状态共享 能力。
为什么你须要 zustand-pub ？
- 利用/组件 间能够
互相调用/批改 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进行应用。