基于zustand维护的一套跨框架(react/vue)跨应用的状态管理及共享方案

zustand-pub

只要从事前端开发，不论是小程序还是web，都绕不开状态管理。
众所周知， zustand 是一套轻量、便捷、可拓展的状态管理方案，不论国内 or 国外，都备受喜爱，star 数已接近 3W。

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

为什么你需要 zustand-pub ？

1. 跨组件、跨应用通信的另一种方案：应用/组件(也可以理解为支持跨应用场景) 间可以相互调用/修改 state，并触发组件渲染,
   • 如果你是iframe，则可以抛弃掉难维护的postMessage + addeventlistener + action了，
   • 如果你是微前端，也不再需要eventCenter + action了，直接通过状态管理中的 action 行为修改 state 即可。
2. 应用/组件间状态可以被缓存：包括 iframe、微前端等，当你的应用被内嵌时，不再需要重新请求/处理状态，可直接从父应用中获取。
3. 提升组件库中直接引用全局状态管理的可行性: 平时我们在业务组件引用全局 store 时会导致该组件换一个应用无法复用的问题，降低了组件的可复用性，而基于zustand-pub则不会再存在此类问题，复用性与开发效率并存。
4. 提升 store 模块化管理的可行性，减少重复代码：以往模块化管理的 store，在不同仓库（应用）下复用时，状态无法同步更新，而基于zustand-pub 模块化管理的 store，状态将能够同步更新，提升了研发过程中 store 逻辑复用的可行性及研发效率。
5. 预请求：某些 iframe / 微前端 场景因为接口请求过多导致页面渲染慢的，可以基于该方案进行子应用状态预请求，优化用户体验
6. 调试体验好：基于 devtools 可以 同时调试/追踪多个应用间的 store，能够极大地降低应用间通信时的调试难度。
7. 迁移成本低：如果你正在使用 zustand 或 zustand-vue，那么使用 zustand-pub 将很简单。

哪些项目里可以使用？

使用案例

1. 不同应用间基于修改目标应用的状态更新视图，也可以跨应用获取状态。不再需要维护postmessage或事件中心。

• iframe
  
• 微前端
  

2. 在 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进行使用。