97

Is there a way to pass parameter into getter of vuex store? Something like:

new Vuex.Store({
  getters: {
    someMethod(arg){
       // return data from store with query on args
    }
  }
})

So that in component I could use 

<template>
    <div>
        <p>{{someMethod(this.id)}}</p>
    </div>
</template>
<script lang="ts">
    import { mapGetters } from "vuex"

    export default {
        props: ['id'],
        computed: mapGetters(['someMethod'])
        }
    }
</script>

but in vuex first argument is state and second is other getters. Is it possible?

Sly
  • 15,046
  • 12
  • 60
  • 89

5 Answers5

120

An ES6 arrow function would work nicely here too. For example, sake, let's say you're looking for a particular 'thing' in your store.

new Vuex.Store({
  getters: {
    someMethod: (state) => (id) => {
      return state.things.find(thing => thing.id === id)
    }
  },
})

Here is another example via the Vuex documentation

devzakir
  • 387
  • 3
  • 15
nivram80
  • 1,303
  • 1
  • 8
  • 8
  • Perfect. I'm using this technique for very similar purpose. Instead of this: `let something = this.$store.state.things && this.$store.state.things.thing ? this.$store.state.things.thing : null`, I can now do `let something = this.$store.getters.getThings('thing')` – camslice Oct 13 '18 at 15:52
  • 9
    This should be the accepted answer as a) it answers the question, and b) it doesn't promote bad practices. Accepted answer is just bad, it should be removed. – Hybrid web dev Nov 27 '18 at 09:19
  • When i'm doing this I get the error: do not mutate vuex store state outside mutation handlers. I know it works I've done this before but now I'm stuck on it :/ – PeeJee Mar 21 '19 at 12:22
106

One way to do this can be:

new Vuex.Store({
  getters: {
    someMethod(state){
      var self = this;
       return function (args) {
          // return data from store with query on args and self as this
       };       
    }
  }
})

However, getter does not take arguments and why is explained in this thread:

the naming convention is slightly confusing, getters indicates state can be retrieved in any form, but in fact they are reducers.

Perhaps we should have reducers being pure methods. Which can be used for filtering, mapping ect.

getters then can be given any context. Similar to computed, but you can now combine computed props to getters in vuex option. Which helps structure of components.

Edit:

A better way to achieve the same thing will be using ES6 arrow as detailed out in the answer of nivram80, using method style getters where you can pass a parameter by returning a function form the getter:

new Vuex.Store({
  getters: {
    someMethod: (state) => (id) => {
        return state.things.find(thing => thing.id === id)
      }
    };       
  }
})
Community
  • 1
  • 1
Saurabh
  • 71,488
  • 40
  • 181
  • 244
  • 2
    The main purpose of getters/computed variables is to cache results. Do you know if it applies (and how) in this special case? Ta. – xpuu Sep 06 '19 at 13:45
  • 2
    @xpuu look at this question for a short analysis of the caching: https://stackoverflow.com/questions/44575886/vuex-mapping-getter-with-argument-cached – Samuel Åslund Sep 16 '19 at 15:13
23

You can pass arguments to getters by returning a function. This is particularly useful when you want to query an array in the store:

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

Inside your vue component:

store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

Note that getters accessed via methods will run each time you call them, and the result is not cached.

The above answer is fetched from official Vue docs: https://vuex.vuejs.org/guide/getters.html#method-style-access

Dharman
  • 30,962
  • 25
  • 85
  • 135
Priyank
  • 341
  • 2
  • 11
5

You can use the MapGetters helper like this, once define store getters:

new Vuex.Store({
  getters: {
    someMethod(state){
       return (value) => {
          return value;
       }
    }
  }
})

Then call getter from a component like this:

<script>
    import { mapGetters } from "vuex"

    export default {
     computed: {
     ...mapGetters(['someMethod'])
     },
     mounted() {
       console.log(this.someMethod('hello world')); // then logs "hello world"
     }       
}
</script>
Alper Guven
  • 81
  • 1
  • 5
5

I don't think that this is what a vuex.getter is meant to do.

first, as you can see in all the above examples the getter can be mapped as a computed only

<script>
    import { mapGetters } from "vuex"

    export default {
     computed: {
     ...mapGetters(['someGetter'])
     },
     mounted() {
       console.log(this.someGetter); // a computed is not a method.
     }       
}
</script>

and if you need it to receive arguments, what you want is a method, not a computed.

I would recommend you to used an store.action instead:

new Vuex.Store({
  actions: {
    someMethod({ state }, arg){
       // do something with state.someValue and the arg
       return someTransformationOfYourState;
    }
  }
})

as actions and mutations can be mapped as methods. and you can use it like this:

<script>
    import { mapActions } from "vuex"

    export default {
     computed: {
     
     },
     mounted() {
       // now you can use someMethod with args in your component 
       this.someMethod('the arg');
     },
     methods: {
     ...mapActions(['someMethod'])
     },       
}
</script>

the first argument of an action is the store itself, so you can access the state from there. same as the dispatch and commit functions.

NOTE that an action can only recieve one paramether (payload) so if you need to send more, you will have to wrap all of them in an object or array

this.someMethod({ arg1, arg2, ...});
Jonos
  • 103
  • 1
  • 9