Vue.js Vue&；Vuex splice--无法读取null的属性。无拼接内容渲染效果良好

使用Vuex和computed属性时，它返回此错误。 我想了好几个小时才把它修好，真是不知所措。 在尝试呈现模板时，数据似乎不可用。奇怪的是，当我不使用拼接时，错误不会出现

错误

模板

        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>

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

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

---

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

计算：{
专家（）{
返回此.store.getters.experts.slice（0,3）；
},
},

experts

Vuex getter为空。您需要确保getter在呈现组件时返回非null值。也许您最初没有正确初始化某些数据？或者，您可以编写防御性代码，处理

experts

为空时的情况，这样您就不会触发错误

---

您没有为

experts

Vuex getter提供代码，因此我无法为您提供任何进一步的帮助。

好的，我认为我的状态中有experts:null，但当我将其更改为experts:[]时，错误消失，但现在仍然无法呈现内容

---

为什么加载后内容不显示？我以为用async计算会在加载后渲染

您似乎可以互换地使用

slice

和

splice

这两个词，但我认为您的意思是

slice

。您的理论听起来是正确的，

experts

的值在您首次尝试呈现模板时为

null

，因为它尚未加载

v-for

可以处理这个问题。据推测，

experts

的值随后会更改，并使用该新值重新呈现组件。如果您尝试使用

切片

，它将在第一次渲染时掉落。如果

experts

是由异步的东西填充的，那么您只需处理数据尚未显示的情况。是的，我指的是切片。但内容仍然没有重播。这是一个VUE SPA与Vuex，不知何故，一旦我使用切片，该网站不再呈现该组件，并抛出错误。此外，我还使用map getter在我放入mounted（）部分的第一个位置获取数据。如何处理应与计算属性一起使用的异步数据？一旦发生错误，您就会陷入困境。您只需首先处理

null

，即可停止错误的发生。在不确切知道为什么会有

null

的情况下，很难推测，但您可以在computed属性中进行

null

检查，或者让store getter返回一个空数组。我使用try-and-catch来准备错误，该错误会停止错误，但最终没有内容。！？！它不会重新渲染，我敢打赌OP有类似于

store:{experts:null}

的地方，他们应该有

experts:[]

我刚刚找到了一个工作修复程序，但它完全相反。我必须在状态中设置expert:null，并在父div中使用V-if=“experts”。如果我使用experts:[]，则错误消失，但内容不会呈现！

    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)">