Vue3教程：状态管理

本节课我们学习下Vue3的状态管理。

类 Flux 状态管理的官方实现

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

。

给 React 开发者的参考信息

如果你是来自 React 的开发者，可能会对 Vuex 和 Redux 间的差异表示关注，Redux 是 React 生态环境中最流行的 Flux 实现。Redux 事实上无法感知视图层，所以它能够轻松的通过一些简单绑定 。

和 Vue 一起使用。Vuex 区别在于它是一个专门为 Vue 应用所设计。这使得它能够更好地和 Vue 进行整合，同时提供简洁的 API 和更好的开发体验。

从零打造简单状态管理

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

const { createApp, reactive } = Vue
const sourceOfTruth = reactive({
  message: 'Hello'
})

const appA = createApp({
  data() {
    return sourceOfTruth
  }
}).mount('#app-a')

const appB = createApp({
  data() {
    return sourceOfTruth
  }
}).mount('#app-b')

<div id="app-a">App A: {{ message }}</div>

<div id="app-b">App B: {{ message }}</div>

现在当 sourceOfTruth 发生变更，appA 和 appB 都将自动地更新它们的视图。虽然现在我们有了一个真实数据来源，但调试将是一场噩梦。应用的任何部分都可以随时更改任何数据，而不会留下变更过的记录。

const appB = createApp({
    data() {
      return sourceOfTruth
    },
    mounted() {
      sourceOfTruth.message = 'Goodbye' // both apps will render 'Goodbye' message now
    }
}).mount('#app-b')  

为了解决这个问题，可以采用一个简单的 store 模式：

const store = {
    debug: true,
  
    state: reactive({
      message: 'Hello!'
    }),
  
    setMessageAction(newValue) {
      if (this.debug) {
        console.log('setMessageAction triggered with', newValue)
      }
  
      this.state.message = newValue
    },
  
    clearMessageAction() {
      if (this.debug) {
        console.log('clearMessageAction triggered')
      }
  
      this.state.message = ''
    }
}

需要注意，所有 store 中 state 的变更，都放置在 store 自身的 action 中去管理。这种集中式状态管理能够被更容易地理解哪种类型的变更将会发生，以及它们是如何被触发。当错误出现时，现在也会有一个 log 记录 bug 之前发生了什么。

此外，每个实例/组件仍然可以拥有和管理自己的私有状态：

<div id="app-a">{{sharedState.message}}</div>

<div id="app-b">{{sharedState.message}}</div>

const appA = createApp({
    data() {
      return {
        privateState: {},
        sharedState: store.state
      }
    },
    mounted() {
      store.setMessageAction('Goodbye!')
    }
  }).mount('#app-a')
  
  const appB = createApp({
    data() {
      return {
        privateState: {},
        sharedState: store.state
      }
    }
}).mount('#app-b')

看下示意图：