What is the dispatch error?

Question

Vue.js

Method in a component

spoiler

setCategory(cat) {
            this.$store.dispatch('setCategory', cat)
            console.log(this.$store.getters.getCategory) // -> 'abc'
        }

Store

spoiler

const state = {
    category: 'abc'
  }

  const mutations = {
    SET_CATEGORY (state, payload) {
      state.category = payload
    }
  }

  const actions = {
    setCategory ({ commit }, payload) {
      console.log(payload) // nothing
      commit('SET_CATEGORY', payload)
    }
  }

  const getters = {
    getCategory: state => state.category
  }

  export default {
    state,
    mutations,
    actions,
    getters
  }

The getter prints 'abc' to the console, but dispatch just doesn't work and doesn't throw any errors. I just don't see what the problem is

Answer 1

console.log(this.$store) - этот экшн видит
The fact that you paid attention to the presence of an action is, of course, wonderful, but in the picture shown there are things that are more interesting. For example, the presence in the store of such properties as originalCommit / originalDispatch. It must be assumed that some plugin took and replaced the real commit and dispatch (while retaining the references to the original methods), and what happens in the new methods, why the mutation is not called ... Honestly, it's not very interesting. Try using the original method: . this.$store.originalDispatch('setCategory', cat)

Answer 2

I don’t understand what the problem is, create a normal store, most likely the problem is in the initialization.
https://jsfiddle.net/3ugcmsdh/ here is my variant with your code that works.