Skip to content

Commit d4f7c2c

Browse files
authored
update forms.md
update forms.md
1 parent 43cd769 commit d4f7c2c

File tree

1 file changed

+7
-7
lines changed

1 file changed

+7
-7
lines changed

src/vuex/forms.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,16 @@ type: vuex
44
order: 12
55
---
66

7-
8-
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:
7+
严格模式下的Vuex,在属于 Vuex 的 state (状态)上使用 `v-model`时会比较棘手:
98

109
``` html
1110
<input v-model="obj.message">
1211
```
1312

14-
Assuming `obj` is a computed property that returns an Object from the store, 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 an error because the mutation is not performed inside an explicit Vuex mutation handler.
1513

16-
The "Vuex way" to deal with it is binding the `<input>`'s value and call an action on the `input` or `change` event:
14+
假设 `obj` 计算的属中返回一个对象,在用户输入时,`v-modle`会尝试直接修改`obj.message`。在严格模式下,因为修改不在Vuex mutation handler中执行,将会抛出一个错误。
15+
16+
用“Vuex思维”去处理是给`<input>`绑定value(值),然后帧听`<input>``change`事件,并在回调中调用action:
1717

1818
``` html
1919
<input :value="message" @input="updateMessage">
@@ -32,7 +32,7 @@ methods: {
3232
}
3333
```
3434

35-
And here's the mutation handler:
35+
在这里使用 mutation handler(变更句柄):
3636

3737
``` js
3838
// ...
@@ -43,9 +43,9 @@ mutations: {
4343
}
4444
```
4545

46-
### Two-way Computed Property
46+
### 双向计算属性
4747

48-
Admittedly, the above is quite a bit more verbose than `v-model` + local state, and we lose some of the useful features from `v-model` as well. An alternative approach is using a two-way computed property with a setter:
48+
必须承认,上述比`v-modle`+本机状态(local state)啰嗦得多,以及从`v-modle`中弃用了一些有用的功能。使用 setter 双向计算属性的另一种方法:
4949

5050
``` js
5151
// ...

0 commit comments

Comments
 (0)