When you are binding directly a Vuex state property to the form via v-model you need to create Two-way Computed Property like this:
// MyComponent.vue
<input v-model="email">
// MyComponent.vue
...
computed: {
email: {
get() {
return this.$store.state.email;
},
set(value) {
this.$store.commit('setEmail', value)
}
}
}
...
Doing this for each property is annoying and verbose. Fortunately we can inspire in Vuex mapGetters, mapMutations and mapActions methods and create our own mapComputed method:
// mapComputed.js
export const mapComputed = (module, fields) => {
const obj = {};
fields.forEach(field => {
obj[field.name] = {
get() {
return this.$store.getters[`${module}/${field.getter}`];
},
set(value) {
this.$store.commit(`${module}/${field.setter}`, value, { root: true });
}
};
});
return obj;
};
The usage is simple then:
// MyComponent.vue
...
computed: {
...mapComputed("user", [
{ name: "email", getter: "getEmail", setter: "setEmail" }
]),
...
Where name is the name of the computed property used in v-model, getter is the name of getter and setter is the name of used setter.
This is only the simple version considering using modules only.
Top comments (0)