Vue.js 获取的Vuex存储项抛出未定义项，然后进行精细渲染

我假设在第一次渲染时组件没有及时水合的情况下，我有一个正在进行的竞赛条件？我不确定我应该在组件生命周期的何处从存储中获取

我得到

[Vue warn]：呈现错误：“TypeError:_vm.currentLogbook.entries在conosle中未定义”

，但随后它呈现良好

    <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')
    },

}

{{currentLogbook.title}
总条目{currentLogbook.Entries.length}
从“@/components/entries/ParksOnTheAirForm”导入ParksOnTheAirForm
从“@/components/logbooks/FrequencyInfoForm”导入FrequencyInfoForm
从“@/components/entries/LogbookEntriesList”导入LogbookEntriesList
从“vuex”导入{mapGetters}
导出默认值{
组成部分：{
帕克森机场，
频率信息表，
日志中心列表
},
计算：{
…映射器（['currentLogbook'，'currentQso']）
},
安装的（）{
this.$store.dispatch（'fetchCurrentLogbook'，this.$route.params.id）
此.$store.dispatch（'initNewQso'））
},
}

问题在于您将currentLogbook初始化为空对象。一旦获取数据，currentLogbook将正确初始化

=>只要未完成数据提取，currentLogbook就是一个空对象

这也意味着当

currentLogbook={}

时，

currentLogbook.title==undefined

以及

currentLogbook.entries==undefined

---

=>因此，当加载页面时，您试图呈现

未定义的.length

，这会导致错误

显示

currentLogbook

的初始状态。在创建

新Vuex（）

时，您是否设置了

currentLogbook

的初始/默认值？作为一种解决方法，当指令

初始状态只是一个空对象时，您可以隐藏HTML元素，因此yes
entries
是未定义的。我应该想到这一点。我是否应该向我的对象添加
条目：[]
？如果是这样的话，为什么我调用'currentLobgook.title'时它没有消失？问题是，您将currentLogbook初始化为一个空对象，然后一旦数据被提取，currentLogbook就被正确地填充=>所以只要提取数据没有完成currentLogbook是一个空对象，这也意味着当
currentLogbook={}
时，
currentLogbook.title===undefined
以及
currentLogbook.entries===undefined
=>因此在加载页面时，您尝试呈现
undefined.length
，这会导致error@davidr你能把它当作回答，这样我就可以把它标记为正确的答案吗？