We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
只要从事前端开发,不论是小程序还是web,都绕不开状态管理。 众所周知, zustand 是一套轻量、便捷、可拓展的状态管理方案,不论国内 or 国外,都备受喜爱,star 数已接近 3W。
而 zustand-pub 则基于zustand为 Iframe、微前端、Module Fedetation、模块化、组件化 等业务场景,提供 跨应用、跨框架 的 状态管理 及 状态共享 能力。
zustand
相互调用/修改 state
触发组件渲染
postMessage + addeventlistener + action
eventCenter + action
action
状态可以被缓存
store
zustand-pub
同时调试/追踪多个应用间的 store
是否登陆/用户信息
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 往往是跟着应用走的,在组件库中我们是无法使用的。
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进行使用。
The text was updated successfully, but these errors were encountered:
No branches or pull requests
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
则不会再存在此类问题,复用性与开发效率并存。同时调试/追踪多个应用间的 store
,能够极大地降低应用间通信时的调试难度。哪些项目里可以使用?
使用案例
业务组件库中,我们对于应用全局状态的引用还是比较频繁的,如
是否登陆/用户信息
等。这些信息如果基于组件props
进行传参,在组件层级比较深的情况下,需要一层一层往下传,并且如果字段有增加或删除,也需要修改多层组件,所以最理想的方案是直接从 store 中获取
但此方案
useUserInfo
往往是跟着应用走的,在组件库中我们是无法使用的。为此,可以引用
zustand-pub
对useUserInfo
进行小小的改动:npm\umd\module federation组件库下使用
这里以react举例,如果你的应用是vue,也可以基于zustand-vue进行使用。
The text was updated successfully, but these errors were encountered: