在 Flux 的架構下,store 上有 action, mutation, getter
action -> webservice(api) fetch 資料
mutation -> 改變 state(data) 的值
getter -> 抓取 sate(data) 的值 (當然,可能是 自訂了一些方法在回傳值,不一定要直接 return)
store 明白的說明了,要改變 state 的是以務必使用 mutation 內定義的方法,而且是以 commit('name', value) 的方式來傳遞資料。
一方面是確保了資料流的方向,再來是效能上的考量不用去watch 變數的狀態,而是變動時,再發出 event 就行了。
而麻煩的是如果是想將 store 的值透過 getter 的方式給 你的 form 元件
並且 以 v-model 方式綁定。
如果你的 form 元件是個 input 好了,由於 v-model 是 2-ways 的方式,也就是會直接更改 bind 的變數。
問題來了? bind 的是 store 下的某個變數並只能透過 mutation 方式,而不能直接更改,不然它就能跳出警告!
解決方式?
只能 bind 的變數不是 reference 參照到 store 本身就行了,也就是 clone 一件出來就好了。
懶人一點的就是 getter 那都 copy 一份就好了。
另一個就是只在你的 form 元件那個做 copy 就好了。
要 copy 的話,建議使用 lodash 的 _.cloneDeep() 一個 object 相當好用。