首先讲讲版本问题，如果使用​​vue-cli2​​模版搭建的基础项目，注意，如果使用​​vue​​版本是2，当你你默认安装​​vuex​​肯定是​​4.x​​版本了，这里需要注意的是，你要降低​​vuex​​版本到​​3.x​​版本，不然​​store​​挂载不到​​vue​​上

mutation

当我们修改数据，只能通过​​mutation​​修改​​state​​

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
  state: {
    data: []
  },
  mutations: {
    storeData (state, payload) {
      state.data = state.data.concat(payload)
    }
  }
})

在页面中

import { mockFeatchData } from '@/mock'

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  computed: {
    ...mapState({
      dataList: state => state.data
    })
  },
  methods: {
    handleData () {
      mockFeatchData().then(res => {
        this.$store.commit('storeData', res)
      })
    }
  }
}

我们修改数据就是​​$store.commit('eventName', payload)​​,当我们触发​​commit​​时，实际上是已经在异步请求回调里获取了数据。

但是官方在描述​​mutation​​有这么说，​​mutation​​内部必须是同步函数，异步会导致内部状态难以追踪，​​devtool​​难以追踪​​state​​的状态

...
mutations: {
    storeData (state, payload) {
      mockFeatchData().then((res) => {
        console.log(res)
         state.data = state.data.concat(res)
      })
    }
}

也就是说上面这段代码，当我们在​​mutations​​中的​​storeData​​中使用了异步函数，我们在​​$store.commit('storeData')​​时，很难追踪​​state​​的状态，因为在触发commit事件时，异步的​​回调函数​​不知道什么时候执行，所以难以追踪。

​​mutations​​是同步事务，假设在​​mutations​​有多个异步的调用，你很难确定这些异步哪些先执行，很难追踪​​state​​的变化，所以也给调试带来了一定难度

​​话说回来，这么写也确实是可以做到更新state的值​​,如果我不用​​vuetool​​这个工具，貌似也没毛病

既然​​mutations​​​是同步的事情，那么异步官方就使用了​​actions​​方案

actions

​​actions​​里面可以做异步操作，但是并不是直接修改数据，提交的是​​mutations​​里面的方法

mutations: {
    storeData (state, payload) {
      state.data = state.data.concat(payload)
    }
},
actions: {
    setStoreData ({ commit }) {
      mockFeatchData().then((res) => {
        commit('storeData', res)
      })
    }
 }

在页面中就是这样触发​​actions​​的

methods: {
    handleData () {
      this.$store.dispatch('setStoreData')
    }
  }

我们把异步操作放在了​​actions​​的方法里面，你会发现​​mockFeatchData​​这是一个异步操作后的结果，然后通过​​commit​​传给了​​mutations​​中

在​​actions​​执行异步操作，将结果给了​​mutations​​，​​mutations​​中同步修改状态​​state​​,使得​​actions​​的操作在​​mutations​​中有记录。

在​​actions​​中也可以有多个异步操作

mutations: {
    storeData (state, payload) {
      state.data = state.data.concat(payload)
    },
    storeText (state, payload) {
      state.text = payload
    }
  },
 actions: {
    setStoreData ({ commit }) {
      mockFeatchData().then((res) => {
        console.log(res, '111')
        commit('storeData', res)
      })
    },
    setStoreText ({ dispatch, commit }, payload) {
      dispatch('setStoreData').then(() => {
        console.log(222)
        commit('storeText', payload)
      })
    }
  }
复制代码

页面上是这样触发​​actions​​的

handleText () {
      this.$store.dispatch('setStoreText', `hello,${Math.random()}`)
    }
复制代码

这里我们也可以用对象的方式

handleText () {
    this.$store.dispatch({
    type: 'setStoreText',
    payload: `hello,${Math.random()}`
})
复制代码

不过此时注意​​actions​​中获取值需要解构才行

setStoreText ({ dispatch, commit }, {payload}) {
      dispatch('setStoreData').then(() => {
        console.log(222, payload)
        commit('storeText', payload)
      })
}
复制代码

在actions可以​​dispatch​​另一个异步的操作，也就是等一个任务完成了后，可以执行另一个​​commit​​

看到这里貌似这里有点明白，为啥所有的异步操作放在​​actions​​里面了，​​mutation​​只负责修改​​state​​,所有异步操作产生的副作用的结果都统统交给了​​mutation​​，这样很好保证​​devtool​​了对数据的追踪。