You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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)
the specified mutation updateProfile will receive a payload {property, value} anytime the setter is called.
pseudo implementation details:
functionmapStateToMutation(namespace,mutationName,vuexObject){consttwoWayComputed={};constproperties=/* all vuexObject own properties */properties.forEach(function(property){twoWayComputed[property]={get(){returnvuexObject[property]},set(value){this.$store.commit(`${nameSpace}/${mutationName}`,{property, value})}}})returntwoWayComputed}
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.
The text was updated successfully, but these errors were encountered:
darrinmn9
changed the title
Proposal: Add helpers mapState{Mutation/Action} for improved form handling
Proposal: Add helpers mapStateTo{Mutation/Action} for improved form handling
Sep 15, 2017
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">
the specified mutation
updateProfile
will receive a payload{property, value}
anytime the setter is called.pseudo implementation details:
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.
The text was updated successfully, but these errors were encountered: