close

經過錯誤的設計試驗!!

2017-09-11[10-39-(37)].jpg

如果您使用 v-model 

 

此時,如果你這樣做(紅線區),做直接對getter的修改,其實是可以執行的。在非嚴僅模式下,是不會報錯的。

(此處是我將一個地取出的值 getStaffDepartmentRadioId 直接存入 getStaffModel.staff_department_id)

2017-09-11[10-20-(14)].jpg

但!這是錯的,在Vuex 裡,修改值,必須經過 mutations ,而直接修改 state 值或 getters值,是違反 「Vuex思維」的

正確的方式在官網的說明就有寫到!

英文:https://vuex.vuejs.org/en/forms.html

中文:https://vuex.vuejs.org/zh-cn/forms.html

2017-09-11[10-26-(42)].jpg

2017-09-11[10-27-(01)].jpg

捷圖來源:https://vuex.vuejs.org/zh-cn/forms.html

 

由官網得知,我們應該修改如下 

(sorry 我有將 department 的部份,在修改時,一併也改成了 class了,和上面對照會有疑問,就幫忙自行腦補吧)

2017-09-11[10-30-(33)].jpg

2017-09-11[10-34-(29)].jpg

在 store 裡的 mutations 新增 updateStaffModelStaffClassId , 利用 commit 將值做修改

而在set() 部份亦同

再來將 getStaffClassId 寫在Form 裡

2017-09-11[10-40-(25)].jpg

ps: 我有將 computedStaffDepartmentId 改成 getStaffClassId ,僅命名沒有任可意義,在此僅說明 Vuex 在Form 的用法

如有疑問,可以我們可以來討論。

arrow
arrow
    文章標籤
    javascript Vue.js vuex html
    全站熱搜

    雲橙雨林 發表在 痞客邦 留言(0) 人氣()