Fix “Vue Warn Error in Mounted Hook Typeerror This Store is Undefined” in Vuex

please click here for more wordpress cource

This error message typically indicates that you are trying to access the store object in a component’s mounted hook, but the store has not been properly imported or initialized.

To resolve this issue, you should ensure that you have imported the store correctly in your Vue app. The store should be created and then passed to the Vue instance using the store option.

For example, your main.js file might look something like this:

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'
import store from './store'

Vue.use(Vuex)

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

In this example, we are importing the store from a separate file and passing it to the Vue instance using the store option. Then, in your component’s script section, you can access the store by importing it:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  
  export default {
    mounted() {
      console.log(this.$store.state) // <-- This will throw the error
    },
    computed: {
      ...mapGetters(['message'])
    }
  }
</script>

In this example, we are using the mapGetters helper function to map the message getter from the store to a computed property in the component.

By importing and initializing the store correctly, you should be able to access the store in your component’s mounted hook without encountering the TypeError: this.$store is undefined error.

You may also like...

Popular Posts

Leave a Reply

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