Vue / Vuex. Vuex store properties not accessible from my component

Question

I have a vue app, and a component. The component is registered and rendering just fine. I just imported vuex to help with state management. I am using typescript and vue-class-decorator for better type safety.

My app look like so: .ts

// load vuex stores
let store = require('./store/store.ts');

// register components here...
Vue.component('my-component', require('./components/MyComponent.vue'));

// initialize vue applications here...
const app = new Vue({
    el: '#app',
    store
});

I can console.log the store and see that store is indeed required correctly.

Here's my store: .ts

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

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        active: false,
    },
    getters: {
        isActive: state => state.active
    }
});

Here's my component: .ts

import { Vue, Component, Prop } from 'vue-property-decorator'
import axios from 'axios'

@Component
export default class MyComponent extends Vue {

    @Prop(String) route?: string

    resent: boolean = false

    loading: boolean = false



    // constructor
    mounted (): void {
        if (!this.route) {
            throw new Error("The route property is missing");
        }
    }

    get myActiveState (this :Vue): any {
        console.log(this.$store);
        return this.$store.getters.isActive;
    }
}

It doesn't matter what I try, I cannot access the stores state property. I can console log this.$store and I do indeed get the correct store, same if I put a breakpoint in and inspect I can directly access the active property, but if I try and console log this.store.state.active or this.store.getters.isActive, then I get an error.

[Vue warn]: Error in render: "TypeError: Cannot read property 'isActive' of undefined"

I can put a breakpoint in and inspect the console to double check the contents of each property. Everything looks good. BUT i cannot access the property with $store.state.active I have to do $store.default.state.active.

What is going on here? Why can I not access the state when it's coded? Additionally trying to code this.$store.default.state.active gives me a build error property does not exist on type Store<any>

It does not. Same error. Getters not found. $store is fine, but $store.getters doesn't exist at runtime. — simonw16

Helper function Helper function · Accepted Answer · 2020-10-04T17:08:31

This guy applies a nice solution to this problem https://www.youtube.com/watch?v=V9MmoBAezD8

in a nutshell, you have to create a shims-vuex.d.ts to solve this problem, as documented by vuex v4.0.0 release

the State type will be exported from your store/index.ts and it should be a representation of your state

import { State } from './store/index.ts';

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $store: Store<State>;
  }
}

// [email protected] is missing the typing for `useStore`. See https://github.com/vuejs/vuex/issues/1736
declare module 'vuex' {
  export function useStore(key?: string): Store<State>;
}

Vue / Vuex. Vuex store properties not accessible from my component

1 Answers