快捷導(dǎo)航

vuex?Mutations同步Actions異步原理解析

更新時間：2022年12月11日 09:45:15 作者：Maic

這篇文章主要為大家介紹了vuex?Mutations同步Actions異步原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

vuex的mutations與actions有什么區(qū)別，除了用法上mutation是同步，actions是異步，這里的同步與異步指的是commitordispatch?并不是，同步指mutations方的內(nèi)部是同步的，而actions內(nèi)部可以是異步的，并且修改數(shù)據(jù)只能在mutations中修改，在actions中異步的操作副作用是通過mutations來記錄。本文是一篇筆者記錄vuex關(guān)于mutations與actions的筆記。

避坑

如果使用vue-cli2模版搭建的基礎(chǔ)項目，注意，如果使用vue版本是2，當(dāng)你你默認(rèn)安裝vuex肯定是4.x版本了，這里需要注意的是，你要降低vuex版本到3.x版本，不然store掛載不到vue上

mutation

當(dāng)我們修改數(shù)據(jù)，只能通過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)
      })
    }
  }
}

我們修改數(shù)據(jù)就是$store.commit('eventName', payload),當(dāng)我們觸發(fā)commit時，實際上是已經(jīng)在異步請求回調(diào)里獲取了數(shù)據(jù)。

但是官方在描述mutation有這么說，mutation內(nèi)部必須是同步函數(shù)，異步會導(dǎo)致內(nèi)部狀態(tài)難以追蹤，devtool難以追蹤state的狀態(tài)

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

也就是說上面這段代碼，當(dāng)我們在mutations中的storeData中使用了異步函數(shù)，我們在$store.commit('storeData')時，很難追蹤state的狀態(tài)，因為在觸發(fā)commit事件時，異步的回調(diào)函數(shù)不知道什么時候執(zhí)行，所以難以追蹤。

mutations是同步事務(wù)，假設(shè)在mutations有多個異步的調(diào)用，你很難確定這些異步哪些先執(zhí)行，很難追蹤state的變化，所以也給調(diào)試帶來了一定難度

話說回來，這么寫也確實是可以做到更新state的值,如果我不用vuetool這個工具，貌似也沒毛病

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

actions

actions里面可以做異步操作，但是并不是直接修改數(shù)據(jù)，提交的是mutations里面的方法

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

在頁面中就是這樣觸發(fā)actions的

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

我們把異步操作放在了actions的方法里面，你會發(fā)現(xiàn)mockFeatchData這是一個異步操作后的結(jié)果，然后通過commit傳給了mutations中

在actions執(zhí)行異步操作，將結(jié)果給了mutations，mutations中同步修改狀態(tài)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)
      })
    }
  }

頁面上是這樣觸發(fā)actions的

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

這里我們也可以用對象的方式

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

不過此時注意actions中獲取值需要解構(gòu)才行

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

在actions可以dispatch另一個異步的操作，也就是等一個任務(wù)完成了后，可以執(zhí)行另一個commit

看到這里貌似這里有點明白，為啥所有的異步操作放在actions里面了，mutation只負(fù)責(zé)修改state,所有異步操作產(chǎn)生的副作用的結(jié)果都統(tǒng)統(tǒng)交給了mutation，這樣很好保證devtool了對數(shù)據(jù)的追蹤。

總結(jié)

靈魂拷問，為什么會有actions中是異步，而mutations是同步,從官方解釋來看，修改state數(shù)據(jù)必須只能mutations中修改，而假設(shè)mutions內(nèi)部有異步，那么會帶來devtool無法準(zhǔn)確追蹤state變化，因為多個異步并不知道哪個異步會先執(zhí)行完。但是話說回來，mutations中有異步，依然可以修改state啊，因為業(yè)務(wù)中我并不太需要知道devtool是如何追蹤state的變化，但是為了遵從規(guī)范，所有的異步都在actions中處理，mutations只集中干一件事，直接修改state值