Javascript Vue组件在渲染前抛出错误？

Home

视图包含两个组件<代码>过滤器和

结果

。组件

结果

在很大程度上取决于受

过滤器

组件影响的vuex存储数据的结果。应用过滤器后，用户单击

Filter

中的按钮，将在存储中创建

结果所需的数据，然后应在
Filter
下方呈现此组件

问题就在这里。当我打开
主页
视图时，
结果
组件在控制台中抛出错误，如
“TypeError:无法读取未定义的属性“0”
。这是预期的，因为数据尚不存在。我试图用
有条件地呈现
结果。当用户进入页面并在单击按钮后加载数据时呈现
结果
时，这会阻止呈现，但当打开页面时，
结果
会抛出与之前相同的错误

我拥有的一个潜在解决方案是，我可以在存储中输入虚拟数据以防止错误（然后使用其他条件进行渲染）。但是必须有一种方法可以在没有虚拟数据的情况下工作。
您已经自己确定了解决方案：在对象本身上使用默认虚拟数据

这将是标准和最佳的方法

如果这样做，您需要意识到Vuex不能很好地处理嵌套的关系数据

通常，您希望对数据进行标准化，使其平坦并通过关系进行映射

你可以在这里了解更多关于正常化状态的必要性


这是关于Redux的，但是这些概念也与Vuex相关

要做到这一点，您需要使用来规范化复杂的数据。标准化后，Vuex中的对象将更易于管理、更新和查询

这样做还可以防止Vuex在尝试访问/更新当前不存在数据的嵌套对象中的数据时抛出错误（请考虑包含注释和回复注释的嵌套数据）

这还具有使数据更易于使用和以编程方式理解的附加好处