VUEX-action可以修改state嗎
首先回顧下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變化時,調(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，就會報出異常。
所以，當(dāng)不是觸發(fā)mutation來修改state， 就不會執(zhí)行commit函數(shù)，也不會執(zhí)行_withcommit函數(shù)，this._committing = true不會執(zhí)行，當(dāng)執(zhí)行 enableStrictMode 時，會執(zhí)行 assert 函數(shù)，這時store._committing為false，就會報出異常。
回歸標(biāo)題action可以修改state嗎
不開啟嚴(yán)格模式的情況下可以，但是不提倡。
綜上所述，經(jīng)測試得知可以修改并修改成功，但是嚴(yán)格模式下控制臺會拋異常且action是異步的，不方便DevTool 調(diào)試
結(jié)語
我們開發(fā)要嚴(yán)格按照官方文檔開發(fā)，避免不必要的錯誤產(chǎn)生。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue遞歸實(shí)現(xiàn)樹形組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要為大家詳細(xì)介紹了Vue.js自定義指令的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
vue打開新窗口并實(shí)現(xiàn)傳參的圖文實(shí)例
這篇文章主要給大家介紹了關(guān)于vue打開新窗口并實(shí)現(xiàn)傳參的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
Vue 如何使用props、emit實(shí)現(xiàn)自定義雙向綁定的實(shí)現(xiàn)
這篇文章主要介紹了Vue 如何使用props、emit實(shí)現(xiàn)自定義雙向綁定的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
本篇文章主要介紹了詳解使用vuex進(jìn)行菜單管理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
vue2中基于vue-simple-upload實(shí)現(xiàn)文件分片上傳組件功能
這篇文章主要介紹了vue2中基于vue-simple-upload的文件分片上傳組件,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
這篇文章主要介紹了Vue項目build后,圖片加載不出來的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了Element-ui upload上傳文件限制的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
Vue列表如何實(shí)現(xiàn)滾動到指定位置樣式改變效果
這篇文章主要介紹了Vue列表實(shí)現(xiàn)滾動到指定位置樣式改變效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
在Vue中,強(qiáng)制刷新組件通常涉及到以下幾種方法,本文給大家列出了常見的三種vue強(qiáng)制刷新組件的方法,感興趣的朋友跟隨小編一起看看吧2024-04-04