vuexjs getter with argument

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?

Answers:

Answer

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)
      }
    };       
  }
})
Answer

An ES6 arrow function would work nice 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

Answer

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>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.