学习vue也有一段时间了，我相信在学习vue的过程不可避免地会接触到状态管理器的概念——也就是vuex。那么，我们首先需要明确的一个概念，到底状态是指什么？其实你完全可以把它理解成某个对象的属性，那么什么又是对象的属性呢？我想这个不用我再一次的解释了吧。好了，简单介绍完状态，下面进入正题，我们通过一个小例子来剖析vuex中的几个核心概念：State、Getters、Mutations、Actions、Modules.
State
在/vuex/modules/下新建一个note.js文件，然后写入以下内容
import * as types from '../mutation-types'
// 整个应用的state
const state = {
notes: [],// 所有的笔记
activeNote: {}// 当前的笔记
}
// mutations
const mutations = {
[types.ADD_NOTE](state) {
const newNote = {
text: 'New note',
favorite: false
};
state.notes.push(newNote);
state.activeNote = newNote;
},
[types.EDIT_NOTE](state, text) {
state.activeNote.text = text;
}
}
// getters
const getters = {
notes: state => { return state.notes },
activeNote: state => { return state.activeNote }
}
export default {
state,
mutations,
getters
}
整个应用只有两个state，一个是所有笔记列表，储存在一个数组对象中；一个是当前的笔记对象。
那么我们组件如何拿到整个应用的state呢？我们在/vuex/目录下新建一个store.js文件，写入：
import Vue from 'vue'
import Vuex from 'vuex'
import note from './modules/note'
import actions from './actions'
Vue.use(Vuex)
export default new Vuex.Store({
// 其实这里完全可以不用modules，为了学习的完整性我改写的时候使用了modules
modules: {
note
},
actions
})
然后在入口文件main.js中将store注入到整个App应用中：
import Vue from 'vue'
import store from './vuex/store'
import App from './components/App.vue'
new Vue({
store,
el: '#app',
components: { App }
})
现在让我们回到NoteList组件中，我们可以有四种方法获取state:
// 方法一：
computed: {
notes() {return this.$store.state.note.notes},
activeNote() {return this.$store.state.note.activeNote}
}
// 方法二：
computed: mapState({
notes: state => state.note.notes,
activeNote: state => state.note.activeNote
})
除去上面提到的两种方法之外，我们还可以利用在modules定义的getters来获取相应的state。引用官方所言：有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数（因此，getters可以被认为是store的计算属性），以下两种方法使用getters来获取state，这样的做法严格上来说是违背getters的使命的，因为我们仅仅是获取store中的state而没有进行某些‘过滤’操作，当然如果你喜欢这么做，那也未尝不可。代码如下：
方法一：
computed: {
notes() {return this.$store.getters.notes},
activeNote() {return this.$store.getters.activeNote}
}
方法二：
computed: {
...mapGetters([
'notes', 'activeNote'
])
}
Getters
上面我们就提到了getters的使用场景，那我们回过头来细说。使用getters可以从store中的state派生出一些状态（其实跟computed的作用是一样一样的），下面就官方文档里的例子作个说明：
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)
}
}
})
在这个例子中，我们需要得到done: true的todos列表记录，那么我们就可以使用getters做一些条件过滤的操作，返回我们需要的数据。此外Getters还可以接受其他getters作为第二个参数：
getters: {
// 基于上面的getters，获取完成的todo条数
doneTodosCount: (state, getters) => {
return getters.doneTodos.length
}
}
store.getters.doneTodosCount // -> 1
那么，我们如何在组件中使用getters呢？其实在上面获取state的时候我们就已经提到如何使用：
computed: {
// 方法一：
notes() {return this.$store.getters.notes},
activeNote() {return this.$store.getters.activeNote},
// 方法二：当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给辅助函数传一个字符串数组。
...mapGetters([
'notes', 'activeNote'
])
// 当然，你也可以重命名，使用对象形式
mapGetters({
noteList: 'notes',
getActiveNote: 'activeNote'
})
}
Mutations
这里我也使用官方文档上的来做个简单的说明，如文档所说，更改store中的状态唯一的方法是提交mutation。
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
// 变更状态
state.count++
}
}
})
在组件中提交Mutations:
你可以在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。
Tips: 要记住mutation必须是同步函数，异步操作我们可以放在actions，实际上我们为了统一，可以把所有操作放在actions.js文件中便于查看。
Actions
actions与mutation的区别：
- Action 提交的是 mutation，而不是直接变更状态
- Action 可以包含任意异步操作，mutation只能是同步的
组件中触发action:
methods: {
updateActiveNote(note) {
this.$store.dispatch('updateActiveNote', note)
}
}
上面只有一个actions，所以没有用mapActions()辅助方法，如果你想了解如何使用mapActions()，可以参考前面所述的关于获取store中state的部分，用法都是一样的，在这里就不再赘述。
Modules
引入modules是为了将store分割成各个模块，比如在一个博客应用里，有文章列表（ArticleList）、文章详情（ArticleDetail）、登录（Login）、评论（Comment）等模块组成，这时候清晰的模块结构划分，便于我们针对某个module 更明确的状态分析。
export default new Vuex.Store({
modules: {
note
},
actions
})
前面一开始，我是把note作为一个module传入store对象中的，这样一来note模块下的state（局部状态）是整个应用state对象的一个子集，也就是作为state的属性存在，描述的关系如下：
const state = {
note: {
notes: [],
activeNote: {}
}
}
因此，我们想要在组件内获取局部状态的时候是这样获取的（获取note模块下的notes）：
computed: {
notes() {return this.$store.state.note.notes},
activeNote() {return this.$store.state.note.activeNote}
}
// 当我们需要获取多个状态的时候，重复上述的方法显得有点麻烦，所以我们这时候就可以考虑使用mapState()等辅助方法来帮助我们简化代码
Tips:
- 使用mapState、mapGetters等方法之前，不要忘记使用
import { mapState, mapGetters } from 'vuex'引入。另外，原作者在webpack.config.js配置里没有对{...}对象结构的插件，所以需要添加babel-plugin-transform-object-rest-spread插件进行配置。 - 原作者使用运行时构建的方式，为了使用独立构建，需在 webpack 配置中添加下面的别名：
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
}
结语：
本次介绍vuex使用了coligo写的例子，原先使用的vuex版本是1.0的，学习完vue，我用vuex2.0重新写了一遍，算是巩固知识，也对vue有了更深入的认识。也欢迎大家看看我重写后的notes-app，这里是线上demo地址。在Segmentfault社区也有人翻译的作者所写的关于这个Notes App的教程说明，推荐给大家。
原文：Learn Vuex by Rebuilding a Notes App
译文：用Vuex构建一个笔记应用
