web-dev-qa-db-fra.com

Accéder aux accesseurs dans les mutations Vuex

Dans une mutation de magasin Vuex, est-il possible d'accéder à un getter? Prenons l'exemple ci-dessous.

new Vuex.Store({
    state: {
        question: 'Is it possible to access getters within a Vuex mutation?'
    },
    mutations: {
        askQuestion(state) {
            // TODO: Get question from getter here
            let question = '';

            if (question) {
                // ...
            }
        }
    },
    getters: {
        getQuestion: (state) => {
            return state.question;
        }
    }
});

Bien entendu, l'exemple n'a pas beaucoup de sens, car je pourrais simplement accéder à la propriété question directement sur l'objet state dans la mutation, mais j'espère que vous voyez ce que j'essaie de faire. C'est-à-dire, conditionnellement en train de manipuler.

Dans la mutation, this est undefined et le paramètre state donne accès à l'objet state et non au reste du magasin.

La documentation sur les mutations ne mentionne rien à ce sujet.

J'imagine que ce n'est pas possible, sauf si j'ai raté quelque chose? Je suppose que l’alternative serait soit d’exécuter cette logique en dehors du magasin (ce qui entraînerait une duplication de code), soit d’implémenter une action le faisant, car les actions ont accès à l’ensemble du contexte du magasin. Je suis à peu près sûr que c'est une meilleure approche, c'est-à-dire de garder la mutation centrée sur ce qu'elle est censée faire; muter l'état. C'est probablement ce que je finirai par faire, mais je suis simplement curieux de savoir s'il est même possible d'accéder à un getter au sein d'une mutation?

vue.jsvuejs2vuex
30
Andy0708

Les méthodes de mutation de magasin Vuex ne fournissent pas d'accès direct aux accesseurs.

Ceci est probablement une mauvaise pratique, mais vous pouvez passer une référence à getters lorsque vous commettez une mutation comme ceci:

actions: {
  fooAction({commit, getters}, data) {
    commit('FOO_MUTATION', {data, getters})
  }
},
mutations: {
  FOO_MUTATION(state, {data, getters}) {
    console.log(getters);
  }
}
34
thanksd

Si vous placez vos accesseurs et mutations dans des modules distincts, vous pouvez les importer dans les mutations, puis procédez comme suit:

import getters from './getters'

askQuestion(state) {
  const question = getters.getQuestion(state)
  // etc
}
4
Kees de Kooter

Une autre solution consiste à importer le magasin existant. En supposant que vous utilisez des modules et que votre module s'appelle foo, votre fichier mutateur ressemblerait à ceci store/foo/mutations.js:

import index from '../index'
export const askQuestion = (state, obj) => {
    let store = index()
    let getQuestion = store.getters['foo/getQuestion']
}

Je ne dis pas que c'est une pratique exemplaire, mais cela semble fonctionner.

0
geoidesic