L'accès des getters dans Vuex mutations

Dans un Vuex magasin de mutation, est-il possible d'accéder à un getter? Considérons 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 sûr, l'exemple n'a pas beaucoup de sens, parce que je pouvais accéder à l' question propriété directement sur le state objet au sein de la mutation, mais j'espère que vous voyez ce que je suis en train de faire. C'est, à condition que la manipulation de l'état.

Au sein de la mutation, this est undefined et la state paramètre permet d'accéder à la state objet, et pas le reste de la boutique.

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

J'imagine que ce n'est pas possible, à moins que j'ai raté quelque chose? Je suppose que l'alternative serait d'effectuer cette logique de l'extérieur du magasin (résultant de la duplication de code) ou la mise en œuvre d'une action qui fait cela, parce que les actions ont accès à l'ensemble de la boutique contexte. Je suis assez sûr que c'est une meilleure approche, c'est de garder la mutation concentré sur ce qu'est réellement censé faire; la mutation de l'état. C'est probablement ce que je vais faire, mais je suis juste curieux de savoir si l'accès à un getter dans une mutation est même possible?

Pourriez-vous expliquer pourquoi vous auriez besoin d'accesseurs en mutation? Vous avez raison, votre exemple pourrait aisément se référer à state.question. Et, oui, en toute logique serait de prendre un autre action sur la base de l'état actuel devrait être traitée dans une action.
Vous pouvez accéder à des getters dans des actions, parce que les actions mettre en contexte en tant que premier argument. comme ceci: actions: { action1: (contexte, la charge utile) => { console.journal(le contexte.les méthodes de lecture.getSomething); }}. Pas sûr que vous pouvez le faire dans les mutations même si, comme les mutations de recevoir uniquement des locaux de l'état.
Parce que mon code est plus complexe que cela, et j'ai besoin de vérifier quelque chose. L'exemple concret est l'ajout d'un produit au panier, et je veux vérifier si il est déjà là. Je voulais garder que la logique de la mutation de la garder propre. Je suis sûr que la meilleure approche est d'utiliser une action, mais elle est juste curieux de savoir si il est même possible d'accéder à des getters dans les mutations - pour quelque raison que ce soit.

OriginalL'auteur Andy0708 | 2017-04-06

21

Vuex magasin de mutation méthodes ne fournissent pas un accès direct à des getters.

C'est probablement une mauvaise pratique, mais vous pourriez passer une référence à getters au moment de commettre une mutation de la sorte:
```
actions: {
  fooAction({commit, getters}, data) {
    commit('FOO_MUTATION', {data, getters})
  }
},
mutations: {
  FOO_MUTATION(state, {data, getters}) {
    console.log(getters);
  }
}
```
Merci! Je vais aller avec une action qui me semble plus approprié. Je suis d'accord que le passage de la getters est une solution de contournement, mais je n'avais pas pensé à ça quand même. Merci pour les précisions! 🙂

OriginalL'auteur thanksd
3

Si vous mettez votre getters et des mutations dans des modules distincts, vous pouvez importer les getters dans les mutations et ensuite ce faire:
```
import getters from './getters'

askQuestion(state) {
  const question = getters.getQuestion(state)
  //etc
}
```
Bien que si votre getter ressemble à ceci? export const mygetter = (state, getters) => (id) => { return state.blah }
import mygetter from './getters'; askQuestion(state) { const question = mygetter(state)

OriginalL'auteur Kees de Kooter
0

Une autre solution consiste à importer le magasin existant. En supposant que vous êtes en utilisant des modules et le module est appelé foo, votre mutateur fichier devrait ressembler à 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 le meilleur entraînement, mais il semble fonctionner.

OriginalL'auteur geoidesic
-1

Vous pouvez également référence à l'objet de la banque au sein d'une mutation, si vous déclarez le magasin comme une expression, comme ceci:
```
const Store = new Vuex.Store({...});
```
et donc à l'intérieur de la mutation, vous pouvez utiliser de la lecture:
```
mutation(state, payload) {
    Store.getters.getter /*and so on*/
}
```
Ce qui se passe dans le {...}? Me ressemble vous êtes la création d'un nouveau magasin, pas référence à l'existant.
tout d'abord vous déclarer le magasin (c'est le {...}), mais aditionally vous de maintenir le Magasin d'objet dans une variable, dans ce cas constant, puis à l'intérieur du Magasin, vous pouvez référence avec la variable d'accès et les accesseurs de la stocker dans une mutation.

OriginalL'auteur Lautaro Ramos

Vous devez vous connecter pour publier un commentaire.