状态管理模式 vuex的完整组成部分包括了state、getters、mutations以及actions。在组件内通过dispatch触发Actions中定义的方法，该方法通过commit一个mutations更改state，state的值会响应式的更新到vue组件中。如果是同步请求，可以直接在vue组件内commit一个mutations，如果有异步请求，则按着官网给的顺序图执行。
index.js
import Vue from 'vue' import Vuex from 'vuex' import state from './app/state' import getters from './app/getters' import mutations from './app/mutations' import actions from './app/actions' import user from './user/user' Vue.use(Vuex) export default new Vuex.Store({ state, getters, mutations, actions, modules: { user } })mutations.js
const mutations = { UPDATE_APP_NAME(state, params) { state.appName = params.newAppName; } }; export default mutations;在mutations中注册的方法参数肯定包括state，这里的state是跟此mutations同级的state,通过这个state参数可以访问到跟mutations同级下的state数据，从而达到修改state的需求。
index.vue
import { mapMutations } from 'vuex'; export default { methods: { // 方式一 oneMethod() { this.$store.commit('UPDATE_APP_NAME', { newAppName: 'newAppName' }) }, // 方式二 ...mapMutations([ 'UPDATE_APP_NAME' ]), twoMethod() { this.UPDATE_APP_NAME({ newAppName: 'newAppName' }); }, // 方式三 threeMethod() { this.$store.commit({ type: 'UPDATE_APP_NAME', newAppName: 'newAppName' }) } } } 方式一是比较常见的一种方式this.$store.commit(value1,value2),其中包含了两个参数，参数value1是mutations中注册的方法名，value2是在mutations中注册的方法的第二个参数，可以是string、number等类型。方式二是将vuex提供的工具方法mapMutations引入，直接调用方法 this.UPDATE_APP_NAME将你需要的参数传入即可。方式三跟方式一相差不大，方式三将参数名和需要的参数放到一个对象中，此对象包含type，type便是mutations中注册的方法名称。actions.js
import {getAppName} from "../../api/AppApi"; const actions = { async updateAppName({ commit }, params) { try{ const { code, info } = await getAppName(params); commit('UPDATE_APP_NAME', info) } catch (e) { console.log(e); } } }; export default actions;此处简单调用了一个模拟接口getAppName。
AppApi.js
export const getAppName = (params) => { return new Promise((resolve, reject) => { const err = null; setTimeout(() => { (!err) && resolve({code: 200, info: {newAppName: 'vuex-test'}}) || reject({code: 500, info: {newAppName: '发生错误了'}}); }) }) }index.vue
import { mapActions } from 'vuex'; export default { methods: { // 方式一 ...mapActions([ 'updateAppName' ]), oneMethod() { this.updateAppName({ queryForm: '123' }) }, // 方式二 twoMethod() { this.$store.dispatch('updateAppName', { queryForm: '123' }) }, // 方式三 threeMethods() { this.$store.dispatch({ type: 'updateAppName', queryForm: '123' }) } } }actions和mutations大同小异，方式一是通过工具方法mapActions,方式二比较常用，但方式一的写法更好一些。方式三同样是参数内包含了type属性。 本次的例子均未采用命名空间，所以actions和mutations直接调用就可以，因为getters、mutations和actions都是注册到全局的。
