快捷導(dǎo)航

VUEX-action可以修改state嗎

更新時(shí)間：2019年11月19日 09:15:35 作者：rain_li

這篇文章主要介紹了VUEX-action可以修改state嗎，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

首先回顧下vuex，官網(wǎng)圖如下

Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation（mutation類似于事件且必須是同步函數(shù)）
action 提交的是 mutation，而不是直接變更狀態(tài)且可以包含任意異步操作（Action通過 store.dispatch 方法觸發(fā)）

一幅圖看清只能通過mutation修改state的原因

commit函數(shù)源碼如下

 commit (_type, _payload, _options) {
  // check object-style commit
  const {
   type,
   payload,
   options
  } = unifyObjectStyle(_type, _payload, _options)

  const mutation = { type, payload }
  const entry = this._mutations[type]
  if (!entry) {
   if (process.env.NODE_ENV !== 'production') {
    console.error(`[vuex] unknown mutation type: ${type}`)
   }
   return
  }
  // 用來修改state
  this._withCommit(() => {
   entry.forEach(function commitIterator (handler) {
    handler(payload)
   })
  })
  this._subscribers.forEach(sub => sub(mutation, this.state))

  if (
   process.env.NODE_ENV !== 'production' &&
   options && options.silent
  ) {
   console.warn(
    `[vuex] mutation type: ${type}. Silent option has been removed. ` +
    'Use the filter functionality in the vue-devtools'
   )
  }
 }

this._withCommit來修改state，其源代碼如下

_withCommit (fn) {
 const committing = this._committing
 this._committing = true
 fn()
 this._committing = committing
}

其中_withCommit函數(shù)的參數(shù)fn是修改state的函數(shù)，在執(zhí)行fn函數(shù)前，將this._committing置為true,理由是在源代碼的251行resetStoreVM函數(shù)中判斷嚴(yán)格模式的代碼，如下：

if (store.strict) {
 enableStrictMode(store)
}

當(dāng) vuex設(shè)置為嚴(yán)格模式，執(zhí)行enableStrictMode函數(shù)，源碼如下：

function enableStrictMode (store) {
 // $watch 函數(shù)來觀察 state的變化
 store._vm.$watch(function () { return this._data.$$state }, () => {
 // tate變化時(shí),調(diào)用 assert函數(shù)
 if (process.env.NODE_ENV !== 'production') {
 // 判斷 store._committing
  assert(store._committing, `do not mutate vuex store state outside mutation handlers.`)
 }
 }, { deep: true, sync: true })
}

當(dāng)store._committing（this._committing）不為true，就會報(bào)出異常。
所以，當(dāng)不是觸發(fā)mutation來修改state，就不會執(zhí)行commit函數(shù)，也不會執(zhí)行_withcommit函數(shù)，this._committing = true不會執(zhí)行，當(dāng)執(zhí)行 enableStrictMode 時(shí)，會執(zhí)行 assert 函數(shù)，這時(shí)store._committing為false，就會報(bào)出異常。

回歸標(biāo)題action可以修改state嗎

不開啟嚴(yán)格模式的情況下可以，但是不提倡。

綜上所述，經(jīng)測試得知可以修改并修改成功，但是嚴(yán)格模式下控制臺會拋異常且action是異步的，不方便DevTool 調(diào)試

結(jié)語

我們開發(fā)要嚴(yán)格按照官方文檔開發(fā)，避免不必要的錯(cuò)誤產(chǎn)生。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: