watak

Vuex 表单处理


严格模式下的Vuex,在属于 Vuex 的 state (状态)上使用 v-model时会比较棘手:

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

假设 obj 计算的属中返回一个对象,在用户输入时,v-model会尝试直接修改obj.message。在严格模式下,因为修改不在Vuex mutation handler中执行,将会抛出一个错误。

用“Vuex思维”去处理是给<input>绑定value(值),然后帧听<input>change事件,并在回调中调用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
 }
}

双向计算属性

必须承认,上述比v-model+本机状态(local state)啰嗦得多,以及从v-model中弃用了一些有用的功能。使用 setter 双向计算属性的另一种方法:

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


Artikel sebelumnya: Artikel seterusnya: