Property or method "$store" is not defined on the instance but referenced during render in-CodePudding

I'm just learning state management of VueJs And I stuck on that, if any one know please let me know How can I render $store in my Vue component When I console the $store its undefined

main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import vuetify from './plugins/vuetify';
import store from './store';

Vue.config.productionTip = false;


new Vue({
  router,
  vuetify,
  store,
  render: (h) => h(App),
}).$mount('#app');
console.log(store.state.test.name);

` index.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    test: { name: 'sagar' },
  },
});

HomeView.vue `

<template>
  <v-main>
    <p>{{ $store.state.test.name }}</p>
  </v-main>
</template>
<script>
export default {
  name: 'HomeView',
  components: {},
};
</script>

this codes show errors on console.

CodePudding user response：

This is the same issue as reported here:

https://stackoverflow.com/a/74478963/8112090

you need to use Vuex 3, which works with Vue 2:

https://v3.vuex.vuejs.org/

The tutorial needs to be updated since Vue 4 is not compatible with Vue 2 anymore.