表单控制

当在严格模式中使用 Vuex 时，属于 Vuex 的 state 在使用 v-model 时需要用一些特殊的技巧。

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

这里的 obj 是在 computed 属性中返回的 Vue state 中的一个对象，在用户输入时，v-model 会直接改变 obj.message。在严格模式中，因为你只能通过 Vuex mutation handler 改变 state, 所以这里会抛出一个错误。

用『Vuex 方式』去解决这个问题的方法是：在 input 中绑定 value，在 input 或者 change 事件中调用 action:

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

// ...
methods: {
  updateMessage: function (e) {
    vuex.actions.updateMessage(e.target.value)
  }
}

updateMessage action 会 dispatch 'UPDATE_MESSAGE', 下面是 mutation handler:

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

必须承认，这样做比简单地使用 v-model 要啰嗦得多，但这换来的是 state 的改变更加清晰和可被跟踪。实际上，Vuex 并不是想你把所有的 state 都放到 Vuex 实例中去 —— 如果有些 state 你不希望去跟踪，你就应该放在 Vuex 外面（比如组件里面），这样就可以愉快地使用 v-model 了。

forms.md 1.3 KB 히스토리 Raw

表单控制

forms.md 1.3 KB

히스토리 Raw