Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Unknown action : Counter not incrementing with Vuex (VueJS)

I'm using the following code to increment a counter in store.js using Vuex. Don't know why, when I click the increment button, it says:

[vuex] unknown action type: 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>
like image 725
Gijo Varghese Avatar asked Mar 11 '23 08:03

Gijo Varghese


1 Answers

You have to use commit in the methods as you are triggering a mutation, not an action:

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

Actions are similar to mutations, the difference being that:

  • Instead of mutating the state, actions commit mutations.
  • Actions can contain arbitrary asynchronous operations.
like image 166
Saurabh Avatar answered Mar 15 '23 16:03

Saurabh