Vuex 返回 "TypeError: Cannot read property 'getters' of undefined"

Question

Vuex 返回 "TypeError: Cannot read property 'getters' of undefined"

javascriptvue.jsvuex

5

Vuex似乎无法找到我的loading_state getter。

但是，Vuex状态和getter仍然在Vue开发工具中注册。我只是似乎无法在我的应用程序中调用它们。

我尝试更改变量名称，通过不同方法调用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");

错误信息：

    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)

- Raymond DeVries

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pierre Said · Accepted Answer

我认为正确的语法是

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