Categories
Vue Answers

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

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *