Vuex: Allow function for mapMutations/mapActions like mapState

Created on 20 Apr 2017  Â·  10Comments  Â·  Source: vuejs/vuex

What problem does this feature solve?

in function normalizeNamespace

make payload to string is so pain;

can we add the typeOf(val) to judege this type?

my English is poor, please forgive me

What does the proposed API look like?

I want to use mapMutations set payload mutations,like

Vuex.mapMutations({
increame: {
type: 'increame',
addNum: 10
}
})

2.0 proposal

Most helpful comment

Do you mean you want to statically set a mutation payload in mapMutation helper? Why isn't it enough for you just to pass the payload to mapped methods?

methods: {
  ...mapMutations({
    increment: 'increment'
  }),

  someMethod () {
    this.increment({ addNum: 10 })
  }
}

All 10 comments

Do you mean you want to statically set a mutation payload in mapMutation helper? Why isn't it enough for you just to pass the payload to mapped methods?

methods: {
  ...mapMutations({
    increment: 'increment'
  }),

  someMethod () {
    this.increment({ addNum: 10 })
  }
}

because the mapState can do like this.
and as u said, do two step.
why not do one step?

Because that would make the payload static

and a component mutation is more the u defined the function is more。 ithink is nogood

Sorry, I don't understand you...
If the amount is always 10, you don't need a payload to set it

@li2568261

mapState can do like this.

I'm afraid I don't understand about this... state has no payload.

do two step.

We always need to call the mapped method even if we can set a payload in helpers. I don't think it has a large difference. I also think we can set the value in actions or mutations if it is really static.

methods: {
  ...mapMutations({
    increment: {
      type: 'increment',
      addNum: 10
    }
  }),

  someMethod () {
    this.increment()
  }
}

So so so sry , my english is very poor,if i can‘t express my means,i will be abandon;

// ...
  computed: mapState({
     //...
    // to access local state with `this`, a normal function must be used
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })

I means : mutation can be define like countPlusLocalState to pass mutations;

   //eg:
   mapMutations({
      item(mutations){
            var payload = {
                 type:'xxx'
             }
           // the config by componet data; 
            payload.config = this.config;
            mutations(payload)
       }
  })

I think in componet, all about moutation in mapMutations;
I'm read the sourcecode may can do that,pass typeof obj parameter;
this is my reasons for problems;

I see. You need a payload converter between a component and a mutation in mapMutations helper, right?
But I wonder what is the difference of just calling this.$store.commit(payload) in a component method if we have to specify the mutation type in the function.

I especially thank you for your patience.
Yes ,I need the converter.
Because .... the this.$store.commit can be omitted.
This is the reasons of the existence of mapMutations;
Do u think so?

Indeed. so the complete api looks like below?

mapMutations(namespace, {
  someMutation (commit, payload) {
    // ...
    commit(type, payload)
  }
})

// ...

vm.someMutation({ value: 123 })

I think mapActions should also have similar API in that case.

mapActions(namespace, {
  someAction (dispatch, payload) {
    // ...
    dispatch(type, payload)
  }
})
Was this page helpful?
0 / 5 - 0 ratings

Related issues

haoxins picture haoxins  Â·  4Comments

gorbypark picture gorbypark  Â·  3Comments

jdittrich picture jdittrich  Â·  3Comments

visualjerk picture visualjerk  Â·  3Comments

weepy picture weepy  Â·  3Comments