vuex的Mutations及mapMutations传参（mutations&actions）

状态管理模式
vuex的完整组成部分包括了state、getters、mutations以及actions。在组件内通过dispatch触发Actions中定义的方法，该方法通过commit一个mutations更改state，state的值会响应式的更新到vue组件中。如果是同步请求，可以直接在vue组件内commit一个mutations，如果有异步请求，则按着官网给的顺序图执行。

1.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'
			})
		}
	}
}

1. 方式一是比较常见的一种方式this.$store.commit(value1,value2),其中包含了两个参数，参数value1是mutations中注册的方法名，value2是在mutations中注册的方法的第二个参数，可以是string、number等类型。
2. 方式二是将vuex提供的工具方法mapMutations引入，直接调用方法 this.UPDATE_APP_NAME将你需要的参数传入即可。
3. 方式三跟方式一相差不大，方式三将参数名和需要的参数放到一个对象中，此对象包含type，type便是mutations中注册的方法名称。

2.Actions

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都是注册到全局的。