Search code examples
vue.jsvuex

Vuex this.$store is not a function but this.$store.dispatch is executed

In my App.vue component, I have:

mounted () {
   this.$store.dispatch('switchSideNav', false)
   ...
   console.log('COOKIE: ', this.$store.state('cookieAgreement'))
   if (!this.$store.state('cookieAgreement')
     .....

this is raising an error:

Error in mounted hook: "TypeError: this.$store.state is not a function"

Checking Vuex on DevTools, I can see:

 state
    cookieAgreement:false
 getters
    getAllState: Object
       cookieAgreement: false

why this.store is right with .dispatch(), but not with .state()?

feedback welcome

Solution

  • Because 'state' is not a function but 'dispatch' is a function of vuex store. State is an javascript object you can use it with dot notation like other javascript objects. Like this;

    this.$store.state.cookieAgreement // This returns your value

this.$store.state('cookieAgreement') // This returns error since .state is not a function its an object