I am facing an issue where Vuex seems unable to locate my getter for the loading_state.
While the vuex state and getter are visible in the Vue developer tools, I am unable to access them within my application.
I have attempted to make changes such as modifying variable names and trying different methods to call the getter.
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)