VUE 3的本地和全球州

2020-07-21 10:47:58

随着Vue 3合成API的出现,人们可以编写本地状态及其紧密耦合的操作,如下所示:

//maths.jsimport{ref}from';vue';;导出函数useMaths(){const val=ref(0);const increment=()=>;(val.value+=1);const deducment=()=>;(val.value-=1);返回{val,increate,deducment,};}。

这看起来应该与Reaction提供的功能非常相似(如果您使用了Reaction挂钩的话)。

上面的代码创建了一个名为val的反应值,并提供了两个动作来递增或递减该值。

此挂钩或可组合函数可以导入到组件中并直接使用,如下所示:

<;模板>;{{val}}<;@click=";increment";>;Increment<;/button>;<;按钮@click=";decrement";>;Decrement<;/button>;<;/template>;<;script>;从';导入{useMaths}。/Maths';;导出默认值{Setup:()=>;{const{val,incremental,deducment}=useMaths();返回{val,增量,减量,};},};<;/script>;

该组件将值和操作绑定到Vue模板。这个useMaths钩子可以导入到任意数量的组件中,并且行为可以重用,同时保持使用它的组件的本地状态。

VUE 3不仅允许我们编写组件和UI,还允许我们编写它们的行为。

但是,当你意识到国家本应是全球性的时,你会怎么做呢?

有时,您可能会认为某个特定状态应该是组件或页面的本地状态。但随着应用程序的发展,这一假设可能不再成立。

或者,在某些情况下,您可能只想试验组件并充实内部工作,同时通过使用本地状态来保持实现的简单性。但是,一旦实验阶段结束,您只需要尽可能多地重用代码,并调整它以使用全局状态。

在上述场景中,Vue 3给了我们一个新的技巧,我们可以使用ref来实现,使这种迁移的实现成本低得可以忽略不计。

//maths.jsimport{ref}from';vue';;const val=ref(0);导出函数useMaths(){const increment=()=>;(val.value+=1);const deducment=()=>;(val.value-=1);返回{val,increate,deducment,};}。

只需将裁判移出钩子的上下文,并使其成为全局。Vue会处理剩下的事情。使用此挂钩的每个组件都将共享相同的VAL。现在,这不是很了不起吗?