How to pass route params to vuex getter?

@elisha_langworth 

To pass route params to a Vuex getter, you can access the route params in your component using $route.params and then pass it to the getter via the component's computed property.

Here is an example of how you can achieve this:

1. In your component file, import the necessary dependencies:

1

import { mapGetters } from 'vuex';

1. Define the computed property using the mapGetters helper:

1
2
3
4

computed: {
  ...mapGetters(['getterName']),
  // additional computed properties
}

1. Access the route params in the computed property and pass it to the getter:

1
2
3
4
5
6

computed: {
  ...mapGetters(['getterName']),
  routeParams() {
    return this.$route.params;
  },
}

1. Use the computed property to access the getter result in your template:

1
2
3
4
5
6

<template>
  <div>
    <p>Route params: {{ routeParams }}</p>
    <p>Getter result: {{ getterName }}</p>
  </div>
</template>

1. In your Vuex store file, define the getter and access the route params as an argument:

1
2
3
4
5
6

getters: {
  getterName: (state) => (routeParams) => {
    // perform calculations or actions with the route params and return the result
    // For example, return state.data.filter(item => item.id === routeParams.id);
  },
},

Now, whenever the route params change, the computed property routeParams will be updated, and consequently, the getter will be evaluated with the latest route params, returning the desired result.

Note: Remember to replace 'getterName' with the actual name of your getter.