Vue & Vuex拼接--无法读取null的属性。如果没有拼接内容，渲染效果会很好

Question

当使用Vuex和computed属性时，它返回此错误。我已经想不出办法了，因为我试了几个小时来修复它。当它尝试呈现模板时，数据似乎不可用。奇怪的是，当我不使用拼接时，错误不会出现。

错误

Vue warn]: Error in render: "TypeError: Cannot read property 'slice' of null"

模板

        v-for="expert in experts"
            :key="expert.name"
            @click="goToProfile(expert.id)">
            <div class="experts__img">
                <LazyImage
                    :src="avatar(expert.file)"
                    :srcset="srcset(expert.file)"
                    :alt="expert.name"
                    :width="375"
                    :height="500"
                    :cover="true"/>
            </div>

脚本

    computed: {
    experts () {
        return this.$store.getters.experts.slice(0,3);
    },

如果我在前端部分使用拼接，我会得到相同的错误

        v-for="expert in experts.splice(0,3)"
            :key="expert.name"
            @click="goToProfile(expert.id)">

Answer 1

错误消息表明，在此代码中：

computed: {
  experts () {
    return this.$store.getters.experts.slice(0,3);
  },
},

experts Vuex getter为空。您需要确保在呈现组件时，getter返回一个非空值。也许你一开始没有正确初始化某些数据？或者，您可以编写防御性代码来处理experts为null时的情况，这样就不会触发错误。

您没有提供experts Vuex getter的代码，所以我不能给您任何进一步的帮助。

Answer 2

好的，所以我认为我有experts:在我的状态下是空的，但是当我把它改为experts:[]时，错误消失了，但是内容现在仍然不呈现。

为什么内容在加载后没有显示出来？我以为使用异步计算会在加载后渲染！？？！