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

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


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.htmlenter image description here


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. */


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.