Unbekannte Aktion: Zähler wird nicht mit Vuex erhöht (VueJS)

Question

Ich verwende den folgenden Code, um einen Zähler in store.js mit Vuex zu inkrementieren. Sie wissen nicht, warum, wenn ich die Schritttaste klicken, heißt es:

[vuex] unbekannt Aktionstyp: INCREMENT

store.js

import Vuex from 'vuex' 
import Vue from 'vue' 
Vue.use(Vuex) 
var store = new Vuex.Store({ 
    state: { 
    counter: 0 
    }, 
    mutations: { 
    INCREMENT (state) { 
     state.counter++; 
    } 
    } 
}) 
export default store 

IcrementButton .vue

<template> 
    <button @click.prevent="activate">+1</button> 
</template> 

<script> 
import store from '../store' 

export default { 
    methods: { 
    activate() { 
     store.dispatch('INCREMENT'); 
    } 
    } 
} 
</script> 

<style> 
</style> 

Answer 1

Sie haben commit in den Verfahren verwenden, wie Sie eine mutation auslösen, keine action:

export default { 
    methods: { 
    activate() { 
     store.commit('INCREMENT'); 
    } 
    } 
} 

Aktionen sind ähnlich Mutationen, dem Unterschied, dass:

• Statt den Zustand mutiert Aktionen begehen Mutationen.
• Aktionen können beliebige asynchrone Operationen enthalten.