VueJS: Xử lý form

Khi sử dụng Vuex ở chế độ strict, có thể hơi phức tạp khi sử dụng v-model trên một phần của state thuộc về Vuex:

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

Giả sử obj là một thuộc tính được tính toán trả về một đối tượng từ store, v-model ở đây sẽ cố gắng biến đổi trực tiếp obj.message khi người dùng nhập vào đầu vào. Trong chế độ strict, điều này sẽ dẫn đến lỗi do mutation không được thực hiện bên trong trình xử lý mutation Vuex rõ ràng.

Cách "Vuex" để giải quyết điều này là ràng buộc giá trị <input> của nó và gọi một action trên input hoặc sử kiện change:

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

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

Và đây là trình xử lý mutation:

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

Thuộc tính computed hai chiều

Phải thừa nhận rằng, ở trên khá dài hơn một chút so với v-model +state local và ta cũng mất một số tính năng hữu ích từ v-model. Một cách tiếp cận khác là sử dụng thuộc tính được computed hai chiều với một setter:

<input v-model="message">

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