Kann ich Commit von einer der Mutationen im Vuex Store aufrufen?

Ich habe einen Vuex- Shop wie folgt:

import spreeApi from '../../gateways/spree-api'
// initial state
const state = {
  products: [],
  categories: []
}

// mutations
const mutations = {
 SET_PRODUCTS: (state, response) => {
   state.products = response.data.products
   commit('SET_CATEGORIES')
 },
 SET_CATEGORIES: (state) => {
   state.categories = state.products.map(function(product) { return product.category})
 }

}

const actions = {
 FETCH_PRODUCTS: (state, filters) => {
   return spreeApi.get('products').then(response => state.commit('SET_PRODUCTS', response))
 }
}

export default {
  state,
  mutations,
  actions
}

Ich möchte Mutation aufrufen: SET_CATEGORIESvon Mutation : SET_PRODUCTS, Aber das gibt mir Fehler:

projectFilter.js: 22 Nicht gefangen (im Versprechen) ReferenceError: Commit ist nicht definiert (…)

Was sollte der richtige Weg sein, um dies zu tun. Ich habe es versucht store.commitund this.commit, aber diese gaben auch ähnliche Fehler.

Wenn Sie bereits eine Mutation durchführen, gibt es keine Möglichkeit zu einer commitanderen Mutation. Eine Mutation ist ein synchroner Aufruf, der den Status ändert. Innerhalb einer Mutation können Sie keine weitere Mutation festlegen.

Hier ist die API-Referenz für Vuex: https://vuex.vuejs.org/en/api.html

Wie Sie sehen können, erhält ein Mutationshandler nur stateund payloadnichts weiter. Deshalb bekommen Sie commitals undefined.

In Ihrem obigen Fall können Sie PRODUKT und KATEGORIEN als Teil desselben Mutationshandlers als einzelnes Commit festlegen. Sie können versuchen, ob der folgende Code funktioniert:

// mutations
const mutations = {
    SET_PRODUCTS_AND_CATEGORIES: (state, response) => {
        state.products = response.data.products
        state.categories = state.products.map(function(product) { return product.category})
    },
    // ...
}

BEARBEITEN: Bitte beziehen Sie sich auf die Antwort von Daniel S. Deboer . Die richtige Methode besteht darin, zwei Mutationen aus einer einzigen Aktion zu begehen, wie in seiner Antwort beschrieben.

Wenn Sie unbedingt zwei Mutationen begehen müssen, warum nicht aus einer Aktion heraus? Aktionen müssen keine asynchronen Vorgänge ausführen. Sie können die Festschreibungsmethode in Ihrer Aktion genauso zerstören wie mit dem Status wie folgt:

commitTwoThings: ({commit}, payload) => {
  commit('MUTATION_1', payload.thing)
  commit('MUTATION_2', payload.otherThing)
}

Für die Aufzeichnung. Um andere Mutationen aus einer Mutationsmethode aufzurufen, gehen Sie folgendermaßen vor:

const mutations = {
    mutationOne(state, payload){
        this.commit("mutationTwo", payload)
    },
    mutationTwo(state, payload){
        console.log("called from another mutation", payload)
    }
}

Um Code zwischen Mutationen zu teilen, müssen Sie eine neue Funktion erstellen, die die Arbeit ausführt und die Sie dann wiederverwenden können. Glücklicherweise sind Mutationen nur alte Funktionen, und wir können den stateParameter nach Belieben weitergeben, so dass dies recht einfach ist.

Zum Beispiel:

const mutations = {
 SET_PRODUCTS: (state, response) => {
   state.products = response.data.products
   setCategories(state)
 },
 SET_CATEGORIES: (state) => {
   setCategories(state)
 }
}

function setCategories(state) {
  state.categories = state.products.map(product => product.category)
}

Und wenn ich einen gemeinsamen Code habe, der den Status zwischen mehreren Mutationen beeinflusst, muss ich für alle meine Mutationen denselben Code duplizieren? Oder gibt es einen besseren Weg, das zu tun?

Wenn Sie die Vuex-Dokumentation zu Aktionen lesen , ist klar, wofür sie gemacht sind.

• Mutationen begehen, anstatt den Staat zu mutieren
• kann beliebige asynchrone Operationen enthalten

Aktionen können ( müssen nicht ) asynchronen Code enthalten. In der Tat ist das folgende Beispiel richtig

increment (context) {
   context.commit('increment')
}

Ich sehe kein Problem darin, Aktionen zum Durchführen mehrerer Mutationen zu verwenden.

In Ihrem Fall sollten Sie nur eine Mutation in Betracht ziehen, nämlich SET_PRODUCTS.

// mutations
const mutations = {
 SET_PRODUCTS: (state, response) => {
   state.products = response.data.products
   state.categories = state.products.map(function(product) { return product.category})
 }
}

Sie sollten SET_CATEGORIES niemals separat aufrufen müssen. Denk darüber nach! Kategorien können nur mutieren, wenn Produkte geändert werden. Und Produkte können sich nur über SET_PRODUCTS ändern.

Bearbeiten: Ich bin auf ein sehr ähnliches Problem gestoßen und die Lösung für mich bestand darin, einen vuex getter zu verwenden: https://vuex.vuejs.org/en/getters.html
Ihre Kategorien sind tatsächlich eine "berechnete" Version Ihrer Produkte. Wenn Sie Kategorien als Getter haben, können Sie sie mit Produkten synchronisieren und vermeiden, dass die Daten in Ihrem Geschäft dupliziert werden.

Um die Frage im Titel zu beantworten, lasse ich meine ursprüngliche Antwort.
Eine Alternative zur Daniel Buckmaster-Lösung:

const mutations = {
 SET_PRODUCTS: (state, response) => {
   state.products = response.data.products
   this.SET_CATEGORIES(state)
 },
 SET_CATEGORIES: (state) => {
   state.categories = state.products.map(product => product.category)
 }
}

Wie Sie sehen, können Sie die Mutation selbst direkt aufrufen. (wie Daniel sagte, es sind schließlich nur einfache Funktionen)
Ich glaube, dass dies eine angemessenere Antwort auf die ursprüngliche Frage ist: Es ist eine tatsächliche Art, Mutationen ohne Codeduplizierung oder zusätzliche Funktionen zusammenzusetzen

Weisen Sie zunächst einer Variablen die Schaltfläche Vue zu: In main.js:

  export const app = new Vue({  
  router,
  vuetify,
  store,....

Importieren Sie dann die Variable "app" in die js-Datei, in der Sie die Mutation definieren: In modules.js:

import { app } from "../../main";

Sie können es jetzt als "app. $ Store.commit" verwenden:

mutations: {
[AUTH_SET_TOKEN]: () => {
app.$store.commit(USER_SUCCESS, params );
},...

Ich rufe lieber an als mutations.SET_CATEGORIES(state): - 2 verschiedene Commits aus einer künstlichen Aktion aufzurufen - oder commit()innerhalb einer Mutation zu tun, da dies das Testen von Einheiten schwieriger macht.

const mutations = {
 SET_PRODUCTS: (state, response) => {
   state.products = response.data.products
   mutations.SET_CATEGORIES(state)
 },
 SET_CATEGORIES: (state) => {
   state.categories = state.products.map(product => product.category)
 }
}

Meiner Meinung nach müssen Sie nicht SET_CATEGORIESin der VueToolbox sehen. Die Zeitreise sollte sowieso funktionieren. Bitte korrigiere mich wenn ich falsch liege.

Ich denke

Das Aufrufen einer Mutation von einer anderen Mutation ist eine schlechte Idee, da der Status und die Komponenten schwer zu debuggen sind

const mutations = {
    mutationOne(state, payload){
        this.commit("mutationTwo", payload)
    },
    mutationTwo(state, payload){
        console.log("called from another mutation", payload)
    }
}

Sie können jedoch einfache Funktionen schreiben und diese können wiederverwendbar sein

function mysecondfn(state,payload){
{
// do your stuff here
}


const mutations = {
    mutationOne(state, payload){
mysecondfn(state,payload)
     },

}

import spreeApi from '../../gateways/spree-api'
// initial state
const state = {
  products: [],
  categories: []
}

// mutations
const mutations = {
 SET_PRODUCTS: (state, {response,commit}) => { // here you destructure the object passed to the mutation to get the response and also the commit function
   state.products = response.data.products
   commit('SET_CATEGORIES') // now the commit function is available
 },
 SET_CATEGORIES: (state) => {
   state.categories = state.products.map(function(product) { return product.category})
 }

}

const actions = {
 FETCH_PRODUCTS: ({commit}, filters) => { // here you destructure the state to get the commit function
   return spreeApi.get('products').then(response => commit('SET_PRODUCTS', {response,commit})) // here you pass the commit function through an object to 'SET_PRODUCTS' mutation
 }
}

export default {
  state,
  mutations,
  actions
}

Dies sollte das Problem beheben. Sie können das Commit aus der Aktion in Ihre Mutation einfügen, damit Sie aus Ihrer Mutation ein Commit durchführen können. Hoffe das hilft