参考链接:https://cn.vuejs.org/guide/scaling-up/state-management.html#what-is-state-management
一直以为状态管理只能通过vuex和pinia实现,惊然发现JS单文件居然也可以。
有多个组件共享一个共同的状态时,就没有这么简单了:
多个视图可能都依赖于同一份状态。
来自不同视图的交互也可能需要更改同一份状态。
需求来源
对于情景 1,一个可行的办法是将共享状态“提升”到共同的祖先组件上去,再通过 props 传递下来。然而在深层次的组件树结构中这么做的话,很快就会使得代码变得繁琐冗长。这会导致另一个问题:Prop 逐级透传问题。
对于情景 2,我们经常发现自己会直接通过模板引用获取父/子实例,或者通过触发的事件尝试改变和同步多个状态的副本。但这些模式的健壮性都不甚理想,很容易就会导致代码难以维护。
一个更简单直接的解决方案是抽取出组件间的共享状态,放在一个全局单例中来管理。这样我们的组件树就变成了一个大的“视图”,而任何位置上的组件都可以访问其中的状态或触发动作。
用响应式 API 做简单状态管理
如果你有一部分状态需要在多个组件实例间共享,你可以使用 reactive() 来创建一个响应式对象,并在不同组件中导入它:
// store.js
import { reactive } from 'vue'
export const store = reactive({
count: 0
})
<!-- ComponentA.vue -->
<script setup>
import { store } from './store.js'
</script>
<template>From A: {{ store.count }}</template>
<!-- ComponentB.vue -->
<script setup>
import { store } from './store.js'
</script>
<template>From B: {{ store.count }}</template>
现在每当 store
对象被更改时,<ComponentA>
与 <ComponentB>
都会自动更新它们的视图。现在我们有了单一的数据源。
然而,这也意味着任意一个导入了 store
的组件都可以随意修改它的状态:
<template>
<button @click="store.count++">
From B: {{ store.count }}
</button>
</template>
不复制了,其它参考源文件。