CODEWITHSUNDEEP
javascriptvue.jsvuexgetter
VOV
VOV

Reputation: 59

Pass params to mapGetters in Vuex

Good day.

I use modules in my vue.js project. Now i need to get filtered data from getter, but don't undestand how provide params.

I want provide 'name' parameter to Getter. How i can do it in Component.vue ?

/*State in vuex*/
state: {
   tempMessageValues: [
            { name: 'RU', status: 'none', selected: false },
            { name: 'BY', status: 'none', selected: false },
            { name: 'KG', status: 'none', selected: false }
        ]
}

/*Getters*/

import * as types from '../types';

export default {
    [types.GETTERS.TEMP_MESSAGE_VALUES]: state => {
        return state.tempMessageValues.find(country => country.name === name);
    }
};

/*Types*/

export const GETTERS = {
    TEMP_MESSAGE_VALUES: 'shared/TEMP_MESSAGE_VALUES'
};

/*Code in Component.vue*/

import * as types from "./store/types";
import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters({
      getTempMessValues: types.GETTERS.TEMP_MESSAGE_VALUES
    })
  }
};

Upvotes: 2

Views: 1749

Answers (2)

Jns
Jns

Reputation: 3257

A way would be to return a function from the getter, which you can then use to pass a parameter in

export default {
[types.GETTERS.TEMP_MESSAGE_VALUES]: state => {
    return (name) => state.tempMessageValues.find(country => country.name === name);
}
};

Now you can pass a parameter to your getter by calling your function:

this.getTempMessValues('YourValue')

Upvotes: 0

jakhicks
jakhicks

Reputation: 594

The docs suggest using currying to pass params to a getter;

export default {
  [types.GETTERS.TEMP_MESSAGE_VALUES]: state => name =>
    state.tempMessageValues.find(country => country.name === name)
};

See https://vuex.vuejs.org/guide/getters.html#method-style-access for their example. You're essentially making your getter return a function the first time it's called.

Does that make sense?

Upvotes: 2

Related Questions