VueX Getter not running after Mutation

Question

I have wired up VueX and the Mutations are working correctly, however, the Getter method isn't running again. I'm using VueJS with TypeScript without using the TS class component syntax.

My code is as follows:

export default new Vuex.Store({
  state: {
    Started: false
  },
  getters: {
    getStarted(state): boolean {
      console.log(state.Started)
      return state.Started;
    }
  },
  mutations: {
    setStarted(state, payload): void {
      console.log("mutated", payload)
      state.Started = payload;
    }
  },
  actions: {
  },
  modules: {
  }
})

I am committing the mutations in child component correctly like so

emitStartedClicked(): void {
  console.log("from child clicked");
  this.$store.commit("setStarted", false);
}

I listen to the getter in parent component like so:

computed: {
    getStarted(): void {
      console.log("gottem");
      return this.$store.getters.getStarted;
    }
  }

I trigger the mutation on a button click from a child component and hope to execute the getter in it's parent component's computed properties.

My console output is as follow:

As you can see, on initial page load, the getter in the computed property seems to be working however, after button clicks which trigger the mutation, there are no updates from the getter. What is the issue here?

Thank you

Have you tried setting state.Started to something other than false? — Shoejep
Good to hear. It was false to start with and then this.$store.commit("setStarted", false); just updates it to false — Shoejep
I understand now, the getter wasn't firing because I initialized state as false and was setting it to false in my mutation as well... so I suppose there's some VueX logic in place that doesn't fire the getter if the state's value doesn't change — Ayudh

Shoejep Shoejep · Accepted Answer · 2020-02-11T11:23:30

Have you tried setting state.Started to something other than false?

It was false to start with and then this.$store.commit("setStarted", false); just updates it to false

VueX Getter not running after Mutation

1 Answers