时间戳

首页 > 解决方案 > 获取的 Vuex 商店项目抛出未定义，然后呈现正常

vue.js - 获取的 Vuex 商店项目抛出未定义，然后呈现正常

问题描述

我假设我有一个竞争条件，组件在第一次渲染时没有及时补水？我不确定我应该从商店获取组件生命周期的哪个位置。

我正在进入[Vue warn]: Error in render: "TypeError: _vm.currentLogbook.entries is undefined"控制台，但它渲染得很好。

    <b-container fluid >
        <b-row>
            <b-col cols="6">
                <h1> {{currentLogbook.title}}</h1>
            </b-col>
            <b-col cols="6" class="text-right">
                <b-button disabled>
                    Total Entries <b-badge variant="dark">{{ currentLogbook.entries.length }}
                </b-badge>
                </b-button>
            </b-col>
        </b-row>
        <b-row>
            <b-col cols="8">
                <ParksOnTheAirForm :qso="currentQso" v-if="currentLogbook.template === 'Parks on the Air'" />
            </b-col>
            <b-col cols="4">
                <FrequencyInfoForm :qso="currentQso"/>
            </b-col>
        </b-row>
        <b-row class="entries-list">
            <b-col cols="12">
                <LogbookEntriesList/>
            </b-col>
        </b-row>
    </b-container>
</template>

<script>
import ParksOnTheAirForm from '@/components/entries/ParksOnTheAirForm'
import FrequencyInfoForm from '@/components/logbooks/FrequencyInfoForm'
import LogbookEntriesList from '@/components/entries/LogbookEntriesList'
import {mapGetters} from 'vuex'
export default {
    components: {
        ParksOnTheAirForm,
        FrequencyInfoForm,
        LogbookEntriesList
    },
    computed:{
        ...mapGetters(['currentLogbook', 'currentQso'])
    },
    mounted() {
        this.$store.dispatch('fetchCurrentLogbook', this.$route.params.id)
        this.$store.dispatch('initNewQso')
    },

}

标签： vue.jsvuex

解决方案

问题是您将 currentLogbook 初始化为一个空对象。然后，一旦获取数据， currentLogbook 就会正确初始化

=> 所以只要获取数据没有完成 currentLogbook 就是一个空对象！

这也意味着 while currentLogbook={}，currentLogbook.title===undefined以及currentLogbook.entries===undefined

=> 因此，当加载页面时，您尝试渲染undefined.length会导致错误

推荐阅读