Vuex

核心概念State单一状态树（用一个对象就包含了全部的应用层级状态），类似于 vue 中的 data定义let store = new Vuex.Store({ state: { count: 0 }})获取最简单的是在计算属性中返回某个状态，这样每当 store.state 发生变化时，能重新求取计算属性，并触发更新相关联的 DOM。computed: { count () { return this.$store.state.count }}mapState 辅助函数 + 对象展开运算符利用 mapState 辅助函数生成多个计算属性，利用对象展开运算符将 mapState 返回的对象和局部计算属性混合使用。若同名，可以给 mapState 传一个字符串数组。import { mapState } from ‘vuex’export default { //… computed: { otherComputed () { // 其他局部计算属性 … }, …mapState({ countNumber: ‘count’, // 等于 ‘countNumber: state => state.count’ }) }}Getter可以从 state 中派生出一些状态，类似于 vue 中的计算属性接受 state 作为第一个参数，可以接受其他 getter 作为第二个参数const store = new Vuex.Store({ state: { todos: [ { id: 1, done: true }, { id: 2, done: false } ] }, getters: { doneTodos: state => { return state.todos.filter(todo => todo.done) }, doneTodosCount: (state, getters) => { return getters.doneTodos.length } }})通过属性访问通过方法访问mapGetters 辅助函数 + 对象展开运算符import { mapGetters } from ‘vuex’export default { computed: { …mapGetters([ ‘doneTodosCount’, ‘anotherGetter’ ]) }}Mutation更改 state 的唯一方式，必须是同步函数参数Action类似 Mutation，但 Action 提交的是 mutation，不能直接改变 state，可以包含异步操作。注册 Action 及参数  Action 函数接受一个 context 对象，该对象与 store 实例具有相同的方法和属性（但不是 store 实例本身），因此可以通过 context.commit 提交一个 mutation，或通过 context.state 和 context.getters 来获取 state 和 getters。  可以通过 ES6 的参数解构来简化代码。actions: { // context 对象, obj 为载荷（其他参数） action1 (context, obj) { console.log(context) context.commit(‘xxx’) }, // 参数解构 context 对象 action2 ({commit, state, getters}, obj) { console.log(commit, state, getters) }}触发 Action// 以载荷形式分发this.$store.dispatch(‘updateNumber’,{ number: 10})// 以对象形式分发this.$store.dispatch({ type: ‘updateNumber’, number: 10})Module