How do I commit a vuex store mutation from inside a vue-router route that imports “store”?

Question

My goal is to commit (invoke/call) a mutation that I've defined in my Vuex store.

store/store.js

export default {
  modules: {
    app: {
      state: {
        shouldDoThing: false,
      }
      mutations: {
        setShouldDoThing: (state, doThing) => { state.shouldDoThing = doThing },
      }
    }
  }
}

Since I attach Vuex to my app, I can use this.$store.commit throughout the app in various components without issue.

main.js

import Store from 'store/store.js';
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);
const app = new Vue({
  el: '#app-root',
  store,
  // ...etc
});

For example:

exampleComponent.vue

export default {
  created() {
    // This works!
    this.$store.commit('setShouldDoThing', true);
  },
}

Now I'd like to commit something from a vue-router Route file, in a beforeEnter method:

exampleRoute.js

import Store from 'store/store.js'

const someRoute = {
  path: '/blah',
  beforeEnter(to, from, next) {
    Store.commit('setShouldDoThing', true);
    next();
  }
}

However, when I try the above, I get the error

TypeError: _state_store__WEBPACK_IMPORTED_MODULE_10__.default.commit is not a function

There's lots of examples online of successfully using vuex getters by importing. And, if I console.log() the Store import, I can see my entire store structure

modules:
  app:
    actions: {someAction: ƒ, …}
    getters: {isStartingQuery: ƒ}
    mutations: {ariaAnnounce: ƒ, …}
    state: {…}
    __proto__: Object

How can I import my Store and then commit a mutation from within a vue-router file?

Caleb Jay Caleb Jay · Accepted Answer · 2020-11-06T23:10:58

I've been googling for a very long time, and didn't find a stackoverflow answer or a vue forums answer for this specific case or issue, so below is the solution that I tested and works in my case.

For whatever reason, I can't trigger commit. However, I can simply invoke the mutation directly, and this change is then reflected throughout other components (as in, a "different" store wasn't imported).

someRoute.js

import Store from 'store/store.js'

const someRoute = {
  path: '/blah',
  beforeEnter(to, from, next) {
    Store.modules.app.mutations.setShouldDoThing(Store.modules.app.state, true);
    next();
  }
}

And later, in some component:

someComponent.vue

export default {
    beforeMount() {
      console.log(this.$store.state.app.shouldDoThing);
      // true
    }
}

How do I commit a vuex store mutation from inside a vue-router route that imports “store”?

1 Answers