Skip to content

Commit f3ab2d3

Browse files
KingMarioyyx990803
authored andcommitted
在表单绑定中使用 vuex 的另一个可行方案 (#190)
在组件中使用计算属性可以使得状态继续保持可跟踪,同时又可方便地使用 v-model 的其他特性。
1 parent ca6c0c3 commit f3ab2d3

File tree

1 file changed

+31
-0
lines changed

1 file changed

+31
-0
lines changed

docs/zh-cn/forms.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,34 @@ mutations: {
3434
```
3535

3636
必须承认,这样做比简单地使用 `v-model` 要啰嗦得多,但这换来的是 state 的改变更加清晰和可被跟踪。另一方面,Vuex **并不**强制要求所有的状态都必须放在 Vuex store 中 —— 如果有些状态你觉得并没有需要对其变化进行追踪,那么你完全可以把它放在 Vuex 外面(比如作为组件的本地状态),这样就可以愉快地使用 `v-model` 了。
37+
38+
此外,如果仍然希望使用 Vuex 管理跟踪状态,并愉快地使用 `v-model`,还可以在组件中使用带 setter 的计算属性,这样,你就可以使用诸如 lazy、number 和 debounce 这样的参数特性了。
39+
40+
``` html
41+
<input v-model="thisMessage">
42+
```
43+
``` js
44+
// ...
45+
vuex: {
46+
getters: {
47+
message: state => state.obj.message
48+
},
49+
actions: {
50+
updateMessage: ({ dispatch }, value) => {
51+
dispatch('UPDATE_MESSAGE', value)
52+
}
53+
},
54+
computed: {
55+
thisMessage: {
56+
get () {
57+
return this.message
58+
},
59+
set (val) {
60+
this.updateMessage(val)
61+
}
62+
}
63+
}
64+
}
65+
```
66+
67+
mutation 保持不变。

0 commit comments

Comments
 (0)