Неизвестное действие: счетчик не увеличивается с помощью Vuex (VueJS)

Я использую следующий код для увеличения счетчика в магазине.js с помощью Vuex. Не знаю, почему, когда я нажимаю кнопку инкремента, он говорит:

[vuex] неизвестный тип действия: инкремент

Магазин.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

Айсрементбуттон.vue 

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

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

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

<style>
</style>
1 4
vue.js vuejs2 vuex

1 ответ:

Вы должны использовать commit в методах, поскольку вы запускаете мутацию, а не действие: 

export default {
  methods: {
    activate () {
      store.commit('INCREMENT');
    }
  }
}
Действия подобны мутациям, с той лишь разницей, что:
    Вместо того чтобы мутировать состояние, действия совершают мутации.
  • действия могут содержат произвольные асинхронные операции.
7