本文共 3021 字，大约阅读时间需要 10 分钟。

状态管理模式

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

转载地址：http://wqlbi.baihongyu.com/