Description
What problem does this feature solve?
Provides seamless form handling integration between v-model and Vuex. This allows a user to easily create two-way computed properties for Vuex object properties as outlined at the bottom of https://vuex.vuejs.org/en/forms.html. This removes alot of the verbosity of creating two-way computed properties, and allows an easier transition if someone is refactoring a component written with local Vue data v-model, to Vuex.
(apologies ahead of time if my variable names are poorly chosen)
What does the proposed API look like?
template:
<input v-model="firstName">
<input v-model="lastName">
computed: {
...mapState('user', ['profile']),
...mapStateToMutation('user', 'updateProfile', this.profile)
}the specified mutation updateProfile will receive a payload {property, value} anytime the setter is called.
pseudo implementation details:
function mapStateToMutation(namespace, mutationName, vuexObject){
const twoWayComputed = {};
const properties = /* all vuexObject own properties */
properties.forEach(function(property) {
twoWayComputed[property] = {
get() {
return vuexObject[property]
},
set(value) {
this.$store.commit(`${nameSpace}/${mutationName}`, {property, value})
}
}
})
return twoWayComputed
}This similar structure could be used for an action as well, incase a user wanted to perform async operations on update of a property. And going further, the api could be extended to allow custom get/set functions to be defined by the user.