Skip to content

Commit ca6c0c3

Browse files
KingMarioyyx990803
authored andcommitted
Practicable usage of vuex in form input binding (#188)
Using a computed property in the component will make the state as traceable.
1 parent 8dcd652 commit ca6c0c3

File tree

1 file changed

+31
-0
lines changed

1 file changed

+31
-0
lines changed

docs/en/forms.md

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

4141
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 store - 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`.
42+
43+
Yet an alternative approach to leverage `v-model` with state in Vuex store is to use a computed property providing a setter in the component, with all the advantages of param attributes such as lazy, number and debounce.
44+
45+
``` html
46+
<input v-model="thisMessage">
47+
```
48+
``` js
49+
// ...
50+
vuex: {
51+
getters: {
52+
message: state => state.obj.message
53+
},
54+
actions: {
55+
updateMessage: ({ dispatch }, value) => {
56+
dispatch('UPDATE_MESSAGE', value)
57+
}
58+
},
59+
computed: {
60+
thisMessage: {
61+
get () {
62+
return this.message
63+
},
64+
set (val) {
65+
this.updateMessage(val)
66+
}
67+
}
68+
}
69+
}
70+
```
71+
72+
The mutation remains the same.

0 commit comments

Comments
 (0)