责任编辑大体上是非官方讲义的杜博韦，用易懂的文本传授Vuex，也对书名文本有删去。

假如你对以内新闻稿不在意，所以就能竭尽全力看责任编辑，期望对你略有协助。

自学三个新技术，要要确切三个W，”What && Why”。

“XX 是甚么？”，”为甚么要采用 XX ，换句话说 XX 有甚么益处”，最终才是”XX 是不是采用”。

Vuex是甚么？

Vuex 类似于 Redux 的状况命令行，用以管理工作Vue的大部份模块状况。

为甚么使用Vuex？

当你急于合作开发小型白眉林应用领域（SPA），会再次出现数个快照模块倚赖同一状况，源自相同快照的犯罪行为须要更改同一状况。

碰到以内情形这时候，你就假如考量采用Vuex了，它能把模块的共享资源状况抽出出，当作三个自上而下科枫商业模式展开管理工作。这种无论你在何方发生改变状况，单厢通告采用该状况的模块作出适当修正。

上面传授怎样采用Vuex。

最简单的Vuex实例

责任编辑就不牵涉怎样加装Vuex，间接透过标识符传授。

import Vue from vue; import Vuex from vuex; Vue.use(Vuex); const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } } })

以内就是三个最简单的Vuex，每三个Vuex应用领域就是三个store，在store中包含模块中的共享状况state和发生改变状况的方法（暂且称作方法）mutations。

须要注意的是只能透过mutations发生改变store的state的状况，不能透过store.state.count = 5;间接更改（其实能更改，不建议这么做，不透过mutations发生改变state，状况不会被同步）。

采用store.commit方法触发mutations发生改变state:

store.commit(increment); console.log(store.state.count) // 1

三个简简单单的Vuex应用领域就实现了。

在Vue模块采用Vuex

假如期望Vuex状况更新，适当的Vue模块也得

// Counter 模块 const Counter = { template: `<div>{{ count }}</div>`, computed: { count () { return store.state.count; } } }

上面的例子是间接操作自上而下状况store.state.count，所以每个采用该Vuex的模块都要引入。为了解决这个，Vuex透过store选项，提供了一种机制将状况从根模块注入到每三个子模块中。

// 根模块 import Vue from vue; import Vuex from vuex; Vue.use(Vuex); const app = new Vue({ el: #app, store, components: { Counter }, template: ` <div class=”app”> <counter></counter> </div> ` })

透过这种注入机制，就能在子模块Counter透过this.$store访问：

// Counter 模块 const Counter = { template: `<div>{{ count }}</div>`, computed: { count () { return this.$store.state.count } } }

mapState函数

computed: { count () { return this.$store.state.count } }

，我们能采用mapState函数简化这个过程。

import { mapState } from vuex; export default { computed: mapState ({ count: state => state.count, countAlias: count, // 别名 `count` 等价于 state => state.count }) } 还有更简单的采用方法： computed: mapState([ // 映射 this.count 为 store.state.count count ])

Getters对象

假如我们须要对state对象展开做处理计算，如下：

computed: { doneTodosCount () { return this.$store.state.todos.filter(todo => todo.done).length } }

假如数个模块都要展开这种的处理，所以就要在数个模块中复制该函数。这种是很没有效率的事情，当这个处理过程更改了，还有在数个模块中展开同样的更改，这就更加不易于维护。

Vuex中getters对象，能方便我们在store中做集中的处理。Getters接受state作为第三个参数：

const store = new Vuex.Store({ state: { todos: [ { id: 1, text: …, done: true }, { id: 2, text: …, done: false } ] }, getters: { doneTodos: state => { return state.todos.filter(todo => todo.done) } } })

在Vue中透过store.getters对象调用。

computed: { doneTodos () { return this.$store.getters.doneTodos } }

Getter也能接受其他getters作为第二个参数：

getters: { doneTodos: state => { return state.todos.filter(todo => todo.done) }, doneTodosCount: (state, getters) => { return getters.doneTodos.length } }

mapGetters辅助函数

与mapState类似于，都能达到简化标识符的效果。mapGetters辅助函数仅仅是将store中的getters映射到局部计算属性：

import { mapGetters } from vuex export default { // … computed: { // 采用对象展开运算符将 getters 混入 computed 对象中 …mapGetters([ doneTodosCount, anotherGetter, // … ]) } }

上面也能写作：

computed: mapGetters([ doneTodosCount, anotherGetter, // … ])

所以在Vue的computed计算属性中会存在两种辅助函数：

import { mapState, mapGetters } from vuex; export default { // … computed: { mapState({ … }), mapGetter({ … }) } }

Mutations

之前也说过了，更改Vuex的store中的状况的唯一方法就是mutations。

每三个mutation都有三个事件类型type和三个回调函数handler。

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

调用mutation，须要透过store.commit方法调用mutation type：

store.commit(increment)

Payload 提交载荷

也能向store.commit传入第二参数，也就是mutation的payload:

mutaion: { increment (state, n) { state.count += n; } } store.commit(increment, 10);

单单传入三个n，可能并不能满足我们的业务须要，这这时候我们能选择传入三个payload对象：

mutation: { increment (state, payload) { state.totalPrice += payload.price + payload.count; } } store.commit({ type: increment, price: 10, count: 8 })

mapMutations函数

不例外，mutations也有映射函数mapMutations，协助我们简化标识符，采用mapMutations辅助函数将模块中的methods映射为store.commit调用。

import { mapMutations } from vuex export default { // … methods: { …mapMutations([ increment // 映射 this.increment() 为 this.$store.commit(increment) ]), …mapMutations({ add: increment // 映射 this.add() 为 this.$store.commit(increment) }) } }

注Mutations要是同步函数。

假如我们须要异步操作，Mutations就不能满足我们需求了，这这时候我们就须要Actions了。