当前位置: 首页 > Web前端 > HTML

zustand带有zustand-vue-zustand-pub,他们来了!!!

时间:2023-03-29 11:42:23 HTML

如果你有兴趣了解更多用法和api,点这里解锁中文文档前言你觉得Redux好用吗?我想改用Context,但是你知道吗Context也有一个很大的缺点:当context值改变时,所有使用这个context的组件都会被重新渲染,即使组件需要的状态可能根本没有改变.基于上下文维护的模块越多,影响范围就越大,在某些情况下,页面会出现明显的卡顿。此外,它依赖于ContextProvider来包装您的应用程序。然后试试zustand,当然你可以选择mobx,zustand和mobx最大的区别是:zustand的state更新遵循了react的思想,使用天然的不可变更新,而mobx类似于vue,直接修改state本身基于数据劫持。开发层面最直观的区别是:zustandstateupdate,新state覆盖旧statestate={a:1}update(){state={a:2}}mobxstateupdate,直接修改属性值state={a:1}update(){state.a++}和其他状态管理框架相比,为什么是zustand而不是redux?轻巧灵活。使用钩子作为消费状态的主要手段不需要使用上下文提供者来包装你的应用程序。可以即时更新(不会导致组件渲染完成更新过程)。为什么zustand而不是react上下文?不依赖于reactcontext,引用更灵活当状态发生变化时重新渲染的组件更少集中的,基于操作的状态管理使用compositionapi作为消费状态的主要手段是可控的,而不是Vue。使用全局注入。最重要的是基于zustand-pub,可以提供跨应用、跨框架的状态管理和状态共享能力。React入门三部曲第一步:安装npminstallzustand#oryarnaddzustand第二步:Store初始化创建的store是一个钩子,你可以往里面放任何东西:基本变量,对象,函数,state必须是不可变更新的,set函数合并状态以实现状态更新。import{create}from'zustand'constuseBearStore=create((set)=>({bears:0,increasePopulation:()=>set((state)=>({bears:state.bears+1})),removeAllBears:()=>set({bears:0}),}))第三步:存储绑定的组件,大功告成!钩子可以在任何地方使用,无需提供提供者。根据选择器获取目标状态,组件将在状态更改时重新呈现。选择目标状态:bearsfunctionBearCounter(){constbears=useBearStore((state)=>state.bears)return

{bears}aroundhere...

}更新目标状态:bearsfunctionControls(){constincreasePopulation=useBearStore((state)=>state.increasePopulation)returnoneup}Vue入门三部曲什么,你还想尝试在Vue中使用它吗?然后Step1和Step2基本一样,不同的是Step3(Store绑定组件):Step1:安装npminstallzustand-vue#或者yarnaddzustand-vueStep2:Store初始化创建的store是一个hook,可以putanythingInside:底层变量,对象,函数,state必须不可变地更新,setfunction合并state来实现状态更新。importcreatefrom"zustand-vue";constuseBearStore=create((set)=>({bears:0,increasePopulation:()=>set((state)=>({bears:state.bears+1})),removeAllBears:()=>set({bears:0}),}))exportdefaultuseBearStoreStep3:Store绑定组件,大功告成!根据选择器获取你的目标状态,组件会在状态改变时重新渲染。商店绑定组件在vue3和vue2中是不同的。