vue.js - tutorial - Accediendo a getters dentro de las mutaciones de Vuex.

vuex set data

Question

Dentro de una mutación de tienda Vuex, ¿es posible acceder a un captador? Considere el siguiente ejemplo.

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

Por supuesto, el ejemplo no tiene mucho sentido, porque podría acceder a la propiedad de la question directamente en el objeto de state dentro de la mutación, pero espero que vea lo que estoy tratando de hacer. Es decir, estado de manipulación condicional.

Dentro de la mutación, this undefined está undefined y el parámetro de state da acceso al objeto de state , y no al resto del almacén.

La documentación sobre mutaciones no menciona nada acerca de hacer esto.

¿Mi conjetura sería que no es posible, a menos que me perdí algo? Supongo que la alternativa sería realizar esta lógica fuera de la tienda (lo que resultaría en una duplicación de código) o implementar una acción que lo haga, porque las acciones tienen acceso a todo el contexto de la tienda. Estoy bastante seguro de que es un mejor enfoque, que es mantener la mutación enfocada en lo que realmente se supone que debe hacer; mutar el estado. Eso es probablemente lo que terminaré haciendo, pero tengo curiosidad si es posible acceder a un captador dentro de una mutación.

Answer 1

Los métodos de mutación de la tienda Vuex no proporcionan acceso directo a los captadores.

Probablemente sea una mala práctica, pero podría pasar una referencia a los getters al cometer una mutación como esta:

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

Answer 2

Otra solución es importar la tienda existente. Suponiendo que está utilizando módulos y su módulo se llama foo , su archivo mutador se vería como este store/foo/mutations.js :

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

No estoy diciendo que esto sea una buena práctica, pero parece funcionar.

Answer 3

Si coloca a sus captadores y mutaciones en módulos separados, puede importarlos en las mutaciones y luego hacer esto:

import getters from ''./getters''

askQuestion(state) {
  const question = getters.getQuestion(state)
  // etc
}

Answer 4

También puede hacer referencia al objeto Tienda dentro de una mutación, si declara la tienda como una expresión, como esta:

const Store = new Vuex.Store({...});

y así dentro de la mutación, puedes usar el getter:

mutation(state, payload) {
    Store.getters.getter /*and so on*/
}