Nuxt是否应在呈现和返回页面之前更新Vuex状态？

Question

这里需要有关Vuex和SSR的一些说明。不知道我不正确的概念是什么，因为这是我第一次使用SSR。我正在尝试使用商店为我的应用程序创建面包屑。概念是父组件将显示面包屑，子组件将在商店中设置面包屑。现在，无论何时服务器渲染，它仅渲染面包屑的初始状态，并且仅在水合后才更新，从而导致错误的面包屑持续几秒钟。

使用伪代码：

Parent.vue

<template>
  <div>
    <div>{{ $store.breadcrumbs }}</div>
    <child />
  </div>
</template>

Child.vue

created() {
  console.log("Component created)
  $store.setBreadcrumbs("This / is / a / test / breadcrumb")
}

父组件不是仅在创建所有子组件之后才呈现吗？该生命周期是如何工作的，如何保证在从服务器发送响应之前更新父对象？

编辑：

创建了一个显示行为的示例https://codesandbox.io/s/vuex-module-test-dmoe6?file=/pages/index.vue

您可以看到状态userName仅在显示“ NoName”初始化状态值之后才更新，然后再将其更新为JohnDoe。

Answer 1

• 为父级和子级添加包装器，因为模板必须具有单个根元素。
• 是的，应该在创建所有子代之后安装父代。
• Paren-child lifecycles
• 尝试使用getter而不是直接调用store