How to fix ‘this.$store is undefined’ with Vue.js and Vuex?

Sometimes, we want to fix ‘this.$store is undefined’ with Vue.js and Vuex.

In this article, we’ll look at how to fix ‘this.$store is undefined’ with Vue.js and Vuex.

How to fix ‘this.$store is undefined’ with Vue.js and Vuex?

To fix ‘this.$store is undefined’ with Vue.js and Vuex, we should put the Vuex store instance into the object we use to create the Vue instance.

For instance, we write

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import Vuex from "vuex";
import store from "./store";

Vue.config.productionTip = false;

Vue.use(Vuex);

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

to import the Vuex store and put it into the object we create the Vue instance with to make this.$store available in all components in the app.

Conclusion

To fix ‘this.$store is undefined’ with Vue.js and Vuex, we should put the Vuex store instance into the object we use to create the Vue instance.