Skip to content

Conversation

ktsn
Copy link
Member

@ktsn ktsn commented Aug 30, 2017

This is a small improvement for mapActions and mapMutations helpers. It allows users to pass functions in the helpers so that reducing some redundant method definitions. The feature is like a counterpart of passing function in mapState.

For example:

const vm = new Vue({
  store,
  template: `<input @input="onInput">`
  methods: mapActions({
    onInput (dispatch, event) {
      // First argument is as same as this.$store.dispatch
      dispatch('inputText', {
        text: event.value
      })
    }
  })
})

The above code is equivalent with the below (Note that inputText is a bit redundant since it is just an bridge method between onInput and the action):

const vm = new Vue({
  store,
  template: `<input @input="onInput">`
  methods: {
    ...mapActions(['inputText']),
    onInput (event) {
      this.inputText({
        text: event.value
      })
    }
  })
})

In addition, this syntax is more effective when we map namespaced modules.

methods: mapActions('some/module', {
  onInput (dispatch, event) {
    // `dispatch` is already namespaced here.
    // So the below line will call `some/module/inputText` action.
    dispatch('inputText', {
      text: event.value
    })
  }
})

I did not implement this syntax for mapGetters because we already can do the same thing with mapState.

Close #750

@ktsn ktsn requested a review from yyx990803 August 30, 2017 15:20
@ktsn ktsn changed the title feat: allow to passing functions in mapActions/mapMutations feat: allow to passing functions in mapActions/mapMutations (fix #750) Aug 30, 2017
@rayax86
Copy link

rayax86 commented Mar 19, 2018

Hi @ktsn, could you please elaborate on

I did not implement this syntax for mapGetters because we already can do the same thing with mapState.

?

What do you mean by "we already can do the same thing with mapState"?

A little bit of context: I am in a situation where I wish to dynamically map getters to one computed property, depending on a piece of data. So it would be nice to:

...mapGetter({
    someValue: function(getters) {
        return getters[this.getterName]
    }
}

@rayax86
Copy link

rayax86 commented Mar 21, 2018

Nevermind, I now see getters are passed to mapState as a param.

Would be nice if the documentation mentions this though.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants