"Utilize parameter passing with mapGetters in the Vuex state management system

Question

"Utilize parameter passing with mapGetters in the Vuex state management system

Hello there!

I'm currently working on a Vue.js project and using modules. I am trying to get filtered data from a getter, but I'm unsure how to provide parameters.

Specifically, I need to pass a 'name' parameter to the Getter. How can I achieve this in my Component.vue file?

/*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
    })
  }
};

javascript vue.js vuex getter

Answer 1

Answer №1

The documentation recommends utilizing currying to pass parameters to a getter function;

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

Refer to https://vuex.vuejs.org/guide/getters.html#method-style-access for an illustration of this concept. Essentially, you are creating a function that is returned by the getter when it is first called.

Is this explanation clear?

Answer 2

The documentation recommends utilizing currying to pass parameters to a getter function;

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

Refer to https://vuex.vuejs.org/guide/getters.html#method-style-access for an illustration of this concept. Essentially, you are creating a function that is returned by the getter when it is first called.

Is this explanation clear?

Answer 3

Answer №2

One way to enhance the getter is by returning a function that allows you to pass a parameter.

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

Now, simply call your function and pass in the parameter to access your getter:

this.getTempMessValues('YourValue')

Answer 4

One way to enhance the getter is by returning a function that allows you to pass a parameter.

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

Now, simply call your function and pass in the parameter to access your getter:

this.getTempMessValues('YourValue')

"Utilize parameter passing with mapGetters in the Vuex state management system

Answer №1

Answer №2

Similar questions

The error message "Next.js 14 does not recognize res.status as a function"

Incorporating map() with data passed down as props from App.js into child components

Refresh the page before the conclusion of the express-Node js function

The timing of the RequestAnimationFrame function varies based on the dimensions of my canvas

Creating a line break in a Vue.js confirmation dialog is a helpful feature that can be achieved with a

Scrolling through a list while the user types in the search bar

Negative vibes with for/in loop

Angular displays X items in each row and column

Identifying the method of navigation using PerformanceNavigationTiming

Utilizing Angular 2 for Integration of Google Calendar API

The function to navigate, 'navTo', is not defined and so it cannot be read

What is the best way to send a JSON object in Vue.js?

Encountering a issue when trying to click the Menu icon in a Vue 3 admin template

I am interested in utilizing Vue Fallthrough attributes, but I specifically want them to be applied only to the input elements within the component and not on the container itself

Angular button will be disabled if the form control is empty

Implementing alphabetical pagination in PHP

What's the reason why Angular stops flickering with the use of "/" in href?

Having trouble displaying multiple image sliders per page using vue.js when pulling images from a local folder

What is the manual way to activate Ratchet's push feature?

How can I showcase data retrieved from a function using Ajax Datatable?