获取的 Vuex 商店项目抛出未定义然后呈现正常

Question

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

我在控制台中得到 [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')
    },

}

Answer 1

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

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

这也意味着虽然 currentLogbook={}、currentLogbook.title===undefined 以及 currentLogbook.entries===undefined

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

获取的 Vuex 商店项目抛出未定义然后呈现正常

Fetched Vuex store item throws undefined and then renders fine

vue.js

vuex