|
|
@@ -1,14 +1,14 @@
|
|
|
-# Form Handling
|
|
|
+# 表单控制
|
|
|
|
|
|
-When using Vuex in strict mode, it could be a bit tricky to use `v-model` on a piece of state that belongs to Vuex:
|
|
|
+当在严格模式中使用 Vuex 时，属于 Vuex 的 state 在使用 `v-model` 时需要用一些特殊的技巧。
|
|
|
|
|
|
``` html
|
|
|
<input v-model="obj.message">
|
|
|
```
|
|
|
|
|
|
-Assuming `obj` is a computed property that returns an Object from Vuex state, the `v-model` here will attempt to directly mutate `obj.message` when the user types in the input. In strict mode, this will result in en error because the mutation is not performed inside an explicit Vuex mutation handler.
|
|
|
+这里的 `obj` 是在 computed 属性中返回的 Vue state 中的一个对象，在用户输入时，`v-model` 会直接改变 `obj.message`。在严格模式中，因为你只能通过 Vuex mutation handler 改变 state, 所以这里会抛出一个错误。
|
|
|
|
|
|
-The "Vuex way" to deal with it is binding the `<input>`'s value and call an action on the `input` or `change` event:
|
|
|
+用 『Vuex 方式』 去解决这个问题的方法是：在 input 中绑定 value，在 `input` 或者 `change` 事件中调用 action:
|
|
|
|
|
|
``` html
|
|
|
<input :value="obj.message" @input="updateMessage">
|
|
|
@@ -22,7 +22,7 @@ methods: {
|
|
|
}
|
|
|
```
|
|
|
|
|
|
-Assuming the `updateMessage` action simply dispatches `'UPDATE_MESSAGE'`, here's the mutation handler:
|
|
|
+`updateMessage` action 会 dispatch `'UPDATE_MESSAGE'`, 下面是 mutation handler:
|
|
|
|
|
|
``` js
|
|
|
// ...
|
|
|
@@ -33,4 +33,4 @@ mutations: {
|
|
|
}
|
|
|
```
|
|
|
|
|
|
-Admittedly, this is quite a bit more verbose than a simple `v-model`, but such is the cost of making state changes explicit and track-able. At the same time, do note that Vuex doesn't demand putting all your state inside a Vuex instance - if you do not wish to track the mutations for form interactions at all, you can simply keep the form state outside of Vuex as component local state, which allows you to freely leverage `v-model`.
|
|
|
+必须承认，这样做比简单地使用 `v-model` 要啰嗦得多，但这换来的是 state 的改变更加清晰和可被跟踪。实际上，Vuex 并不是想你把所有的 state 都放到 Vuex 实例中去 —— 如果有些 state 你不希望去跟踪，你就应该放在 Vuex 外面（比如组件里面），这样就可以愉快地使用 `v-model` 了。
|
Randy