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

Question

Home 视图包含两个组件。 Filter 和 Results。 Results 组件很大程度上依赖于受Filter 组件影响的 vuex 存储数据的结果。在应用过滤器并且用户单击Filter 中的按钮后，Results 所需的数据将在商店中创建，然后该组件应呈现在Filter 下方。

这就是问题所在。当我打开Home 视图时，Results 组件会在控制台中引发错误，例如"TypeError: Cannot read property '0' of undefined"。这是意料之中的，因为数据还不存在。我尝试使用<Results v-if="$store.state.data != {}" /> 有条件地渲染Results。这可以防止在用户进入页面时呈现，并在单击按钮后加载数据后呈现Results，但在打开页面时Results 会引发与之前相同的错误。

我有一个可能的解决方案是我可以在存储中输入虚拟数据以防止错误（然后在其他条件下渲染）。但是必须有一种方法可以在没有虚拟数据的情况下工作。

Answer 1

您自己已经确定了解决方案：在对象本身上使用默认虚拟数据。

这将是标准和最佳的方法。

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

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

您可以在此处了解有关规范化状态的更多信息

https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape/

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

为此，您可以使用Vue ORM 来规范化复杂数据。规范化后，Vuex 中的对象将更易于管理、更新和查询。

这样做还可以防止 Vuex 在您尝试从当前不存在数据的嵌套对象访问/更新数据时抛出错误（想想嵌套数据，其中它是 cmets 并回复 cmets）。

这还具有使您的数据更易于以编程方式处理和理解的额外好处。