Vuex 表單處理

嚴(yán)格模式下的Vuex，在屬于 Vuex 的 state （狀態(tài)）上使用 v-model時(shí)會(huì)比較棘手：

<input v-model="obj.message">

假設(shè) obj 計(jì)算的屬中返回一個(gè)對(duì)象，在用戶(hù)輸入時(shí)，v-model會(huì)嘗試直接修改obj.message。在嚴(yán)格模式下，因?yàn)樾薷牟辉赩uex mutation handler中執(zhí)行,將會(huì)拋出一個(gè)錯(cuò)誤。

用“Vuex思維”去處理是給<input>綁定value（值），然后幀聽(tīng)<input>或change事件，并在回調(diào)中調(diào)用action：

<input :value="message" @input="updateMessage">

// ...
computed: {
 ...mapState({
   message: state => state.obj.message
 })
},
methods: {
 updateMessage (e) {
   this.$store.commit('updateMessage', e.target.value)
 }
}

在這里使用 mutation handler(變更句柄):

// ...
mutations: {
 updateMessage (state, message) {
   state.obj.message = message
 }
}

雙向計(jì)算屬性

必須承認(rèn)，上述比v-model+本機(jī)狀態(tài)(local state)啰嗦得多，以及從v-model中棄用了一些有用的功能。使用 setter 雙向計(jì)算屬性的另一種方法：

// ...
computed: {
 message: {
   get () {
     return this.$store.state.obj.message
   },
   set (value) {
     this.$store.commit('updateMessage', value)
   }
 }
}