feat: add createNamespacedHelpers() to help dealing with namespaced modules

[riophae]

When using namespaced Vuex module with Vue components, binding namespace to the helper functions (mapState, mapGetters, mapMutations and mapActions) is a bit verbose. For example:

const storeModule = new Vuex.Store({
  namespaced: true,
  state: { val: 0 },
  actions: {
    someAction() {},
  },
})

const store = new Vuex.Store({
  modules: {
    foo: storeModule,
  },
})

new Vue({
  store,
  state: { str: 'abc' },
  computed: {
    // I split up these two state mapping to take advantage of array syntax
    ...mapState('foo', ['val']),
    ...mapState('foo', {
      newVal(state) {
        return state.val + ' ' + this.str
      },
    })
  },
  methods: {
    ...mapActions('foo', ['someAction']),
    someOtherMethod() {},
  },
})

You can see how many times I have repeated to do the binding job to integrate the Vue component with the module assets.

So I wrote a little helper function to help keep the code DRY. You can see the test to learn how that works.

[ktsn]

I prefer to use the same name as normal mapXXX helpers here.
It would be more consistent with the normal helpers and the users can rename them if they needs.

[riophae]

@ktsn Ok, I have followed your advice.

[yyx990803]

Cool!

[mikeapr4]

I went looking in the code to find something to do this exact thing today, I was really pleased when I found it, would be happier if it was released :) in the meantime I'll add it locally as a helper.

Any value in this?:

export const mapForComputation = normalizeNamespace ((namespace, map) => ({
    ...mapState(namespace, {get: map.state}),
    ...map.action && mapAction(namespace, {set: map.action}),
    ...map.mutation && !map.action && mapMutation(namespace, {set: map.mutation})
}))

Usage:

 computed: {
     somevalue: mapForComputation({state: 'somevalue', mutation: 'setSomeValue'})
 }

Again, to reduce verbosity (https://vuex.vuejs.org/en/forms.html). The interface isn't very consistent with the other map* functions, maybe better to name it something else.

Actually maybe the more consistent interface would be:

 computed: {
     ...mapForComputation({
         somevalue: {state: 'somevalue', mutation: 'setSomeValue'}
     })
 }