Vue.js and vuex: this.$store is undefined

In my case, I was using modules. I could access mutations, actions and getters without any issue. But not the state. Solution is when using modules state should access with the namespace of the module.

Check the documentation for more information.

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
 state: { ... },
 mutations: { ... },
 actions: { ... }
}

const store = new Vuex.Store({
    modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> `moduleA`'s state
store.state.b // -> `moduleB`'s state

By default, actions, mutations and getters inside modules are still registered under the global namespace

Maybe, you have not included the store inside the Vue instance

Your App entry point (app.js or main.js or index.js) must include this code:

import store from './store'

new Vue({
 ...
 store,
 ...
})

then you can use this.$store in any component

but I recommend the general architecture: https://vuex.vuejs.org/en/structure.html

In Your main.js File

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import Vuex from 'vuex';
import {store}  from './store'  //use curly braces to around store. 

Vue.config.productionTip = false;

Vue.use(Vuex);

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

This worked for me.

The store file should be Javascript (.js) file. Changing the file name and rebooting the server make the this.$tore error vanish.

The error was actually here :

App.vue

import store from './vuex/store';  /** in my case, it should be js file. */