Vue & Vuex splice -- 无法读取 null 的属性。没有拼接内容呈现正常答案

【问题标题】：Vue & Vuex splice -- cannot read property of null. Without splice content renders fineVue & Vuex splice -- 无法读取 null 的属性。没有拼接内容呈现正常
【发布时间】：2020-06-29 21:17:43
【问题描述】：

当使用 Vuex 和计算属性时，它会返回此错误。当我尝试了几个小时来修复它时，我没有想法。似乎在尝试渲染模板时数据不可用。奇怪的是，当我不使用 splice 时，错误不会出现。

错误

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

【问题讨论】：

您似乎在交替使用 slice 和 splice 这两个词，但从代码中我假设您的意思是 slice。你的理论听起来是正确的，experts 的值是null 当你第一次尝试渲染模板时，因为它还没有加载。 v-for 可以处理。大概experts 的值随后会发生变化，并且组件会使用该新值重新渲染。在您尝试使用slice 的情况下，它会在第一次渲染期间翻倒。如果experts 被异步填充，那么您只需要处理数据尚未显示的情况。
是的，我的意思是切片。但内容仍然没有重新呈现。它是一个带有 Vuex 的 VUE SPA，不知何故，一旦我使用切片，该站点就不再呈现该组件并引发错误。此外，我首先使用 map getter 来获取放在mounted() 部分中的数据。如何处理应与计算属性一起使用的异步数据？
一旦发生错误，您就会陷入困境。您只需要首先处理null 即可停止发生错误。在不知道为什么你有一个null 的情况下很难推测，但你可以在计算属性中放入一个null 检查，或者让存储获取器返回一个空数组。
我使用 try 和 catch 为错误做准备，该错误会停止错误，但毕竟没有内容。！？！然后它不会重新渲染

标签： vue.js vuex

【解决方案1】：

错误信息表明在这段代码中：

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

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

您没有提供 experts Vuex getter 的代码，所以我无法为您提供任何进一步的帮助。

【讨论】：

我敢打赌，OP 应该有 store: { experts: null } 之类的东西，而他们应该有 experts: []

【解决方案2】：

好的，所以我认为我的状态是experts: null，但是当我将其更改为experts:[] 时，错误消失了，但现在内容仍然完全没有呈现。

为什么加载后内容不显示？我以为用异步计算会在加载后渲染！??!

【讨论】：

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