Vuex的工作原理

1.为什么要用vuex?
对于组件间共享的数据、或是需要通过props深层传递的一些数据，以前的通信方式会导致数据流异常的混乱，最好将这些数据抽离到全局统一处理，方便追踪数据的变化。

2.为什么可以在任意的vm中通过this.$store访问Store的实例?
用混入将vuexInit方法混入进beforeCreate钩子中。

function vuexInit(){ // 将根节点的store层层向下设置
  const options = this.$options
  if(options.store){
      this.$store = options.store  
  }else {
    this.$store = options.parent.$store
  }
}

3.如何对state进行响应式化
什么叫对state进行响应式化？对存在state中的数据进行修改，所有用到这个数据的地方都会跟着变化。
将全局的globalData传入一个Vue对象的data中，之后再任意模板中对该变量进行展示，因为此时globalData已经在Vue的prototype上，所以可以直接通过this访问，也就是模板中的{{globalData.d}}。然后在代码中修改globalData.d，可以看到模板中的globalData.d也发生了变化。

4.vuex的使用

• state:存放全局数据
• getter: 从state中派生出的一些状态，数组的长度或者数组的过滤之类的
• mutation:对state进行修改，必须是同步的。在组件中通过this.$store.commit('xxx')来提交mutation.
• action:类似mutation对状态进行修改，但是在action里不会直接修改state，而是通过提交mutation来更改state。另外action里可以包含异步处理。在组件中通过this.$store.dispatch('xxx')来提交mutation.
• module:可以讲store分割成模块，每个模块拥有自己的state、mutation、action、getter。然后可以通过this.$store.state.moduleA.text来访问模块中的state数据。但是模块内部的 action、mutation 和 getter 默认是注册在全局命名空间的，不需要通过模块的名字来访问。如果有同名的action、mutation，都会被触发。