Passer des arguments à un getter Vuex

publié le 05/12/2019

Vue Quasar Vuex

C'est un besoin assez trivial de devoir passer un argument à un getter Vuex. Cependant je n'ai jamais trouvé l'information dans la doc et la syntaxe m'a toujours paru un peu complexe. Je profite de cet article pour me faire un petit mémo :-)


Le code posté ci-dessous est un extrait d'un projet Quasar, dans lequel j'utlise Vuex en mode modules. La syntaxe de ce getter pourrait cependant être appliquée dans n'importe quel projet Vue. Voici comment rédiger une fonction getter acceptant des arguments:

// src/store/myModule/getters.js
export const myFunctionWithArgument = (state) => (myArgument) => {
    // it's an example
    return state.all[myArgument]
}

Dans votre single file component, vous pouvez maintenant appeler cette fonction de cette manière:

// src/components/MyComponent.vue
export default {
    computed: {
        myValue () {
            return this.$store.getters['myModule/myFunctionWithArgument'](2)
            // the value 2 is the argument I pass to my getter function
        }        
    }
}

Et voilà. Pas tellement compliqué, quand on a la syntaxe sous les yeux et qu'on peut la copier/coller à l'envi...

Dans le cas où votre store Vuex n'est pas en mode modules, la syntaxe est celle-ci:

// src/store/index.js
export default function () {
  const Store = new Vuex.Store({
      // etc...
    getters: {
      myFunctionWithArgument: (state) => (myArgument) => {
        // it's an example
        return state.all[myArgument]
      }
    }
  })
}