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