vuex 中 actions 与 mutations 的区别，以及如何触发

vuex 模块化中，我们通常会定义 state，mutations，actions  等，state 中定义一些数据，通常是全局状态管理的数据；mutations 也是一个对象，这个对象里面可以存放改变state 的初始值的方法，且为同步操作；actions 是异步操作，通常我们可以调用接口信息。

一、异步操作 actions

首先我们来说下，vue 组件中如何调用 actions 中的方法？

方案一：使用 mapActions

import { mapActions } from 'vuex'
methods: {
  ...mapActions(['Login']),

  async handleSubmit (e) {
    await this.Login(this.form)
  }
}

方案二：使用 dispatch 触发

// Login 为 actions 中的异步函数，this.form 为参数
this.$store.dispatch('Login', this.form)

我们在模块的 action 中，异步接口请求获取到数据，然后使用同步操作的方式去修改数据的初始值。

// src/store/modules/user.js 
import api from '@/http/api/user'
const user = {  
  actions: {
    async Login ({ commit }, userInfo) {
      try {
        ......
        const { tokenInfo } = resp.data
        // token
        commit('setToken', tokenInfo.token)
      } catch (e) {
        throw e
      }
    }
  }
}
export default user

二、同步操作 mutations

那我们如何进行同步修改数据的呢？commit，使用 commit 提交 mutation，从而进行同步操作。

import api from '@/http/api/user'
const user = {  
  mutations: {
    setToken: (state, token) => {
      state.token = token
    },
  },
}
export default user

同样提交至 mutation 也有两种方案。

方案一：使用 mapMutations

import { mapMutations } from 'vuex'
methods: {
  ...mapMutations([
    'setLoginVisible',
  ]),
  // 登录点击事件
  toLogin () {
    this.setLoginVisible(true)
  },
}

方案二：使用 commit

// setLoginVisible 为 mutations 中的同步函数，true 为参数
this.$store.commit('setLoginVisible', true)

在模块的 mutations 中，修改数据如下：

import api from '@/http/api/user'
const user = {  
  mutations: {
    setLoginVisible: (state, loginVisible) => {
      state.loginVisible = loginVisible
    },
  },
}
export default user

总结：actions 可以进行异步操作，可用于向后台提交数据或者接受后台的数据；mutations 中是同步操作，用于将数据信息写在全局数据状态中缓存。