Vuex 嚴格模式下的表單處理

2021-08-18 22:54:34 字數 1579 閱讀 8003

在使用 vue 進行表單處理時，我們通常會使用v-model來建立雙向繫結。但是，如果將表單資料交由 vuex 管理，這時的雙向繫結就會引發問題，因為在嚴格模式下，vuex 是不允許在 mutation 之外的地方修改狀態資料的。以下用乙個簡單的專案舉例說明，完整**可在 github（鏈結） 檢視。

src/store/table.js

export default 


}}
src/components/nonstrict.vue

label="表名：">


v-model="table.table_name" />


b-form-group>


import from 'vuex'


export default 


}script>
當我們在「表名」字段輸入文字時，瀏覽器會報以下錯誤：

錯誤：[vuex] 禁止在 mutation 之外修改 vuex 狀態資料。


at assert (vuex.esm


.js?358c:97)


at vue.store._vm.$watch.deep (vuex.esm


.js?358c:746)


at watcher.run (vue.esm


.js?efeb:3233)
當然，我們可以選擇不開啟嚴格模式，只是這樣就無法通過工具追蹤到每一次的狀態變動了。下面我將列舉幾種解決方案，描述如何在嚴格模式下進行表單處理。

第一種方案是直接將 vuex 中的表單資料複製到本地的元件狀態中，並在表單和本地狀態間建立雙向繫結。當使用者提交表單時，再將本地資料提交到 vuex 狀態庫中。

src/components/localcopy.vue

v-model="table.table_name" />


import _ from 'lodash'


export default 


},methods: 


}}script>
src/store/table.js

export default 


}}
以上方式有兩個缺陷。其一，在提交狀態更新後，若繼續修改表單資料，同樣會得到「禁止修改」的錯誤提示。這是因為settable方法將本地狀態物件直接傳入了 vuex，我們可以對該方法稍作修改：

settable (state, payload)
第二個問題在於如果其他元件也向 vuex 提交了資料變動（如彈出的對話方塊中包含了乙個子表單），當前表單的資料不會得到更新。這時，我們就需要用到 vue 的監聽機制了：

8 嚴格模式和表單處理

本文是學習vuex時做的筆記，所有筆記內容請看 vuex學習筆記 開啟嚴格模式，僅需要在建立store時後傳入 strict true const store newvuex.store 在嚴格模式下，無論何時發生了狀態變更且不是路由mutation 函式引起的，將會丟擲錯誤。這能保證所有的狀態變更...

Vuex之表單處理

表單的v model屬性值是vuex的state時，如果時嚴格模式，因為使用者輸入時，v model會試圖修改v model的值，由於修改並非mutation執行的,嚴格模式下會丟擲錯誤。參考這裡 針對這種情況，有兩個處理方法 乙個是雙向繫結的計算屬性，乙個是給表單繫結value，然後偵聽input...

js嚴格模式下的this指向

一 全域性作用域中的this es5,6，不管是嚴格模式函式不是嚴格模式this都指向window use strict console.log this window 二 全域性作用域中函式中的thises5，非嚴格模式this指向window，嚴格模式this指向undefined es6箭頭函...