Nuxt 不应该在渲染和返回页面之前更新 Vuex state 吗？

Question

这里需要一些关于 Vuex 和 SSR 的说明。 因为这是我第一次使用 SSR，所以不知道我没有正确理解什么概念。 我正在尝试使用商店为我的应用程序创建面包屑。 这个概念是父组件将显示面包屑，子组件将在商店中设置面包屑。 现在，每当服务器渲染时，它只渲染面包屑的初始 state 并且只在水合后更新，导致几秒钟的面包屑错误。

在伪代码中：

父.vue

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

孩子.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

您可以看到 state 用户名仅在显示“NoName”初始化 state 值之后才更新，然后将其更新为 JohnDoe。

Answer 1

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