状态管理方案Vuex VS Bus

Vuex专为vue.js应用程序开发的状态管理模式，目的解决繁杂事件订阅和广播。

有的时候一个事件，对应的模块都要找半天，而vuex相当于中介，又可以看作是模块化，一种对事件通信的模块化处理。对一个事件，vuex大体可以看作四步，第一到action里面查到这个事件的触发，第二到mutaction里面查看对应处理，第三步改变store的状态，第四部getter视图渲染；vuex三个关键词：action,mutation,store,中文意思：活动的，突变的，储存的，注意action，mutation，getter都必须是函数。

文件目录顺序如下：
1.index.js(定义):入口脚本，为单一状态树，需要定义我们所需要管理的数组、对象、字符串等等，只有在这里定义了，在vue.js的组件中才能获取你定义的这个对象的状态，vuex里面的状态只读（计算属性computed也是只读），修改状态只能dispatch。需要引入以下文件：

import * as actions from './actions'
import * as getters from './getters'
import mutations from './mutations'

2.mutation-type.js：声明整个项目存在的事件有哪些；
3.actions.js:事件对应的函数操作。mounted挂载下的dispatch方法触发action相关处理，若页面状态需要改变，则调用commit方法提交mutation修改state。此文件要导入mutation-type.js和用到的API文件；
4.mutation.js（获取）:监听事件（修改state），此文件要导入mutation-type.js；
5. getters.js:获取到state新值，重新渲染Vue组件，界面随之更新；
5.各个零件汇总得到store.js代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
import plus from './mutations/a模块'
import mins from './mutations/b模块'
Vue.use(Vuex)

export default new Vuex.Store({
   modules:{
       a模块,
b模块
   }
})

在module选项里写入各自模块名字，对外提供一个大的vuex实例。
总结：

1. vuex状态管理模式的数据储存在store里面，和localstorege的区别是：locastorge不能自动变化，而store可以。
2. Vue的路由管理页面交互； Vuex管理同一个页面的多个组件的交互；
3. Computed里面的值默认只读,index.js里面的状态也是默认只读，需要修改只能dispatch；

官方推荐的状态管理方案是 Vuex，不过如果项目不是很大，状态管理也没有很复杂的话可以使用 Bus,可以使用$emit， $on， $off 分别来分发、监听、取消监听事件：

分发事件

methods: {
  todo: function () {
    this.$bus.$emit('todoSth', params);  //params是传递的参数
    //...
  }
}

监听的组件和取消监听

created() {
  this.$bus.$on('todoSth', (params) => {  //获取传递的参数并进行操作
      //todo something
  })
},
// 最好在组件销毁前,清除事件监听
beforeDestroy () {
  this.$bus.$off('todoSth');
},

如果需要监听多个组件，只需要更改 bus 的 eventName:

created() {
  this.$bus.$on('firstTodo', this.firstTodo);
  this.$bus.$on('secondTodo', this.secondTodo);
},
// 清除事件监听
beforeDestroy () {
  this.$bus.$off('firstTodo', this.firstTodo);
  this.$bus.$off('secondTodo', this.secondTodo);
},