Vue 3.0 状态管理

vicky.yu

类 Flux 状态管理的官方实现
由于状态零散地分布在许多组件和组件之间的交互中，大型应用复杂度也经常逐渐增长。为了解决这个问题，Vue 提供 vuex：我们有受到 Elm 启发的状态管理库。vuex 甚至集成到 vue-devtools，无需配置即可进行时光旅行调试 (time travel debugging)。

#React 的开发者请参考以下信息
如果你是来自 React 的开发者，你可能会对 Vuex 和 Redux 间的差异表示关注，Redux 是 React 生态环境中最流行的 Flux 实现。Redux 事实上无法感知视图层，所以它能够轻松的通过一些[简单绑定_blank_nofollow](https://classic.yarnpkg.com/en/packages?q=redux vue&p=1)和 Vue 一起使用。Vuex 区别在于它是一个专门为 Vue 应用所设计。这使得它能够更好地和 Vue 进行整合，同时提供简洁的 API 和改善过的开发体验。

#简单状态管理起步使用
经常被忽略的是，Vue 应用中响应式 data 对象的实际来源——当访问数据对象时，一个组件实例只是简单的代理访问。所以，如果你有一处需要被多个实例间共享的状态，你可以使用一个 reactive 方法让对象作为响应式对象。

const sourceOfTruth = Vue.reactive({
  message: 'Hello'
})
const appA = Vue.createApp({
  data() {
    return sourceOfTruth
  }
}).mount('#app-a')
const appB = Vue.createApp({
  data() {
    return sourceOfTruth
  }
}).mount('#app-b')
<div id="app-a">App A: {{ message }}</div>
<div id="app-b">App B: {{ message }}</div>