Vue 组件在渲染前抛出错误？
Vue component throws errors before rendered?
Home 视图包含两个组件。 Filter 和 Results。 Results 组件严重依赖受 Filter 组件影响的 vuex store 数据的结果。应用过滤器并且用户单击 Filter 中的按钮后，Results 所需的数据将在商店中创建，然后该组件应呈现在 Filter.[=25= 下方]
问题来了。当我打开 Home 视图时，Results 组件在控制台中抛出错误，如 "TypeError: Cannot read property '0' of undefined"。这是预期的，因为数据尚不存在。我尝试使用 <Results v-if="$store.state.data != {}" /> 有条件地渲染 Results。这可以防止在用户进入页面时呈现并在单击按钮后加载数据后呈现 Results，但是 Results 在打开页面时会抛出与以前相同的错误。
我有一个可能的解决方案是我可以在商店中输入虚拟数据以防止错误（然后用其他条件呈现）。但是必须有一种方法可以在没有虚拟数据的情况下工作。
您自己已经确定了解决方案：在对象本身上使用默认虚拟数据。
这将是标准的最佳方法。
如果你这样做，你需要意识到 Vuex 不能很好地处理嵌套关系数据。
通常，您希望对数据进行归一化，使其平坦并通过关系进行映射。
您可以在此处详细了解规范化状态的必要性
https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape/
它是关于 Redux 的，但其中的概念也与 Vuex 相关。
为此，您需要使用 Vue ORM 来规范化复杂数据。规范化后，Vuex中的对象将更易于管理、更新和查询。
这样做还可以防止 Vuex 在您尝试从当前不存在数据的嵌套对象中 access/update 数据时抛出错误（想想包含评论和回复评论的嵌套数据）。
这还有一个额外的好处，就是让您的数据更易于以编程方式使用和理解。
Home 视图包含两个组件。 Filter 和 Results。 Results 组件严重依赖受 Filter 组件影响的 vuex store 数据的结果。应用过滤器并且用户单击 Filter 中的按钮后，Results 所需的数据将在商店中创建，然后该组件应呈现在 Filter.[=25= 下方]
问题来了。当我打开 Home 视图时，Results 组件在控制台中抛出错误，如 "TypeError: Cannot read property '0' of undefined"。这是预期的，因为数据尚不存在。我尝试使用 <Results v-if="$store.state.data != {}" /> 有条件地渲染 Results。这可以防止在用户进入页面时呈现并在单击按钮后加载数据后呈现 Results，但是 Results 在打开页面时会抛出与以前相同的错误。
我有一个可能的解决方案是我可以在商店中输入虚拟数据以防止错误（然后用其他条件呈现）。但是必须有一种方法可以在没有虚拟数据的情况下工作。
您自己已经确定了解决方案：在对象本身上使用默认虚拟数据。
这将是标准的最佳方法。
如果你这样做，你需要意识到 Vuex 不能很好地处理嵌套关系数据。
通常，您希望对数据进行归一化，使其平坦并通过关系进行映射。
您可以在此处详细了解规范化状态的必要性
https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape/
它是关于 Redux 的，但其中的概念也与 Vuex 相关。
为此，您需要使用 Vue ORM 来规范化复杂数据。规范化后，Vuex中的对象将更易于管理、更新和查询。
这样做还可以防止 Vuex 在您尝试从当前不存在数据的嵌套对象中 access/update 数据时抛出错误（想想包含评论和回复评论的嵌套数据）。
这还有一个额外的好处，就是让您的数据更易于以编程方式使用和理解。