Vue笔记（五）：Vuex

Vuex—集中式状态管理模式

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

以上是 Vuex 官方文档给出的定义，抓一下关键词我们不妨称之为集中式的状态管理模式。它实际上就是将组件间的共享状态抽取出来，以一个全局单例模式进行状态管理，下面我们用官方文档上的例子来对比一下两者的使用。

1. 常用的组件状态共享

在下面的 Vue 计数应用中，我们常用以下方式进行状态管理。

• state：定义组件初始数据
• view：根据状态变化更新视图
• actions：响应用户操作产生的状态变化

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: 
    `<div>{{ count }}</div>`,
  // actions 
  methods: {
    inc () {
      this.count++
    },
    dec () {
      this.count--
	}
  }
})

每个组件内拥有自己的数据和逻辑，很好的实现了组件化化便于管理。但这种方式有极大的弊端，组件的个数或者嵌套层级越多时，他们之间的状态管理就变得十分复杂。比如兄弟组件间同步状态需要使用 event bus，父子间组件间需要 props 属性和 emit 触发事件来达到目的。

2. 集中式状态管理

为了解决上述问题，我们可以采用 Vuex。

• state：全局唯一数据源，包含全部的应用状态。集中存储了组件所需要的数据以进行全局的统一状态管理。
• mutations：状态变更方法。提交 mutations 是更改 state 的唯一方法。
  • commit：提交 mutations 的唯一方法。
• actions：负责响应用户操作，主要是异步操作。
  • dispatch：执行 actions 的唯一方法。
• getters：类似于计算属性 computed，可响应式获取 state 对象。

Vue 组件接收交互行为，调用 dispatch 方法触发 action 相关处理，若页面状态需要改变，则调用 commit 方法提交 mutation 修改state，通过 getters 获取到state新值，重新渲染 Vue Components，界面随之更新。

new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    inc: state => state.count++,
    dec: state => state.count--
  }
})
new Vue({
  el: '#app',
  computed: {
    count () {
      return store.state.count
    }
  },
  methods: {
    inc () {
      store.commit('inc')
    },
    dec () {
      store.commit('dec')
    }
  }
})

Vuex 将所有的状态集中管理，使得应用的数据流动和状态变化十分清晰，简化组件间的状态同步与修改。

总结

对于 Vuex 的适用场景，要取决于组件间通信的复杂程度。如果较为复杂则要使用 Vuex 来简化操作增加程序的可维护性。