Vuex了解

State

Vuex是用来管理某个应用的整个状态，那么一个应用只能有一个Vuex实例。和React一样，Vuex也不允许直接去修改state，而是通过提交mutation，来触发状态变更。Vuex的状态存储是响应式的，若store中的状态发生变化，相应的组件也会得到相应的高效更新。从store的实例中读取状态最简单的方法是在计算属性中返回某个状态。例如：每当store.state.count变化的时候，都会重新求取计算属性，之后触发更新相关联的DOM.

Getter

为什么会定义Getter呢？这是因为如果你想从store的state中派生出一些状态，例如对列表进行过滤并计数。这时我们会首先想到使用computed。就是使用计算属性，这样在state变化时，DOM也能做出及时变化。但是如果你想将这个方法用到多个组件中，这时候也许你会复制此段代码，或者抽象成一个模块，在多个组件中引入。这两个办法看起来都不是一个好方法。

因此，Vuex定义了Getter，这个方法放在store中，这时候可以供给多个组件同时使用。因为Getter的产生是因为想从state中派生出一些状态，所以getters中的方法的第一个参数是state。第二个参数可以是getter。

Mutation

Mutation意为变动。前面说过更改Vuex的store中的状态的唯一办法是提交mutation。Vuex中的mutation类似于事件：每个mutation都有一个字符串的事件类型（type）和回调函数（handler）。这个回调函数就是实际进行状态更改的地方，并且他会接受一个state作为第一个参数。就像事件触发一样，不能直接调用mutation的回调函数，得将其唤醒，而唤醒handler的方式就是提交（commit）mutation。

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) { //increment为
      // 变更状态
      state.count++
    }
  }
})

store.commit('increment'); //唤醒handler

提交载荷

你可以向store.commit方法中传入参数，即mutation的载荷。

//...
mutations:  {
    increment (state,n) {
        state.count += n;
    }
}

store.commit("increment",10);

大多数情况下，载荷应该是一个对象，这样可以包含多个字段而且记录的mutation会更易读。

//...
mutations: {
    increment (state,payload){
        state.count += payload.amount;
    }
}

store.commit("increment",{amount:10});//mutation是同步事务。任何由increment导致的状态变更都应该在此刻完成。

因此为了进行异步操作，我引入了Action。

Action

Action类似Mutation，不同在于：1.Action提交的是mutation；mutation是直接变更store.state。2.Action可以包含任何异步操作。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

Action函数接受一个与store实例具有相同方法和属性的context对象。

Module