Vuex returning "TypeError: Cannot read property 'getters' of undefined"

Question

Vuex seems to not be able to find my getter for my loading_state.

However, the vuex state and getter still registers in the Vue developer tools. I just cannot seem to call them in my application.

I've tried changing variable names, calling the getter via different methods.

loading_store.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export const loading_store = new Vuex.Store({
    state: {
        loading: true
    },
    mutations: {
        setFalse(state) {
            state.loading = false;
        },
        setTrue(state) {
            state.loading = true;
        }
    },
    getters: {
        isLoading: state => {
            return state.loading;
        }
    }
});

App.vue

<template>
    <div id="app">
        <Navigation />
        <loading-spinner v-if="isLoading" />
        <router-view class="m-3" />
    </div>
</template>

<script>
import Navigation from "@/components/Navigation";
import LoadingSpinner from "@/components/LoadingSpinner";
import { mapGetters } from "vuex";

export default {
    name: "app",
    components: {
        LoadingSpinner,
        Navigation
    },
    metaInfo: {
        title: "SnowStats"
    },
    computed: {
        ...mapGetters(["isLoading"])
    }
};
</script>

main.js

import Vue from "vue";
import App from "./App.vue";
//////////
import { loading_store } from "./state/loading_store";

/////////

new Vue({
    state: loading_store,
    router,
    render: h => h(App)
}).$mount("#app");

Error messages:

    vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'getters' of undefined"

    found in

    ---> <App> at src/App.vue
           <Root>


    TypeError: Cannot read property 'getters' of undefined
        at VueComponent.mappedGetter (vuex.esm.js?2f62:896)
        at Watcher.get (vue.runtime.esm.js?2b0e:4473)
        at Watcher.evaluate (vue.runtime.esm.js?2b0e:4578)
        at VueComponent.computedGetter [as isLoading] (vue.runtime.esm.js?2b0e:4830)
        at Object.get (vue.runtime.esm.js?2b0e:2072)
        at Proxy.render (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"34f9cbf8-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/App.vue?vue&type=template&id=7ba5bd90& (app.js:947), <anonymous>:13:11)
        at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3542)
        at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4060)
        at Watcher.get (vue.runtime.esm.js?2b0e:4473)
        at new Watcher (vue.runtime.esm.js?2b0e:4462)

Answer 1

I believe the correct syntax is

new Vue({
    store: loading_store,
    router,
    render: h => h(App)
}).$mount("#app");