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 来简化操作增加程序的可维护性。