VUE 3的本地和全球州

随着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。现在，这不是很了不起吗？