Proposal: Add helpers mapStateTo{Mutation/Action} for improved form handling

[darrinmn9]

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.

[darrinmn9]

is there a reason no one has commented on this?

[nikolay-borzov]

Similar to #1037