Nuxt 不应该在渲染和返回页面之前更新 Vuex 状态吗？答案

【问题标题】：Shouldn't Nuxt update Vuex state before rendering and returning a page?Nuxt 不应该在渲染和返回页面之前更新 Vuex 状态吗？
【发布时间】：2020-09-04 14:10:27
【问题描述】：

这里需要一些关于 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。

【问题讨论】：

这似乎无效，模板只能包含 1 个元素，而不是像你这里的 2 个 div 和 child
这只是伪代码。我会修复模板，因为它会造成混乱。

标签： javascript vue.js vuex nuxt.js server-side-rendering

【解决方案1】：

为父子元素添加包装器，因为模板必须有一个根元素。
是的，应在创建所有子代后挂载父代。
Parent-child lifecycles
尽量使用getter而不是直接调用store

【讨论】：

这只是伪代码，但我修复了模板单根以避免混淆。我了解父子生命周期，但我的问题更多是关于服务器端渲染的主题。如果子级在父级之前创建和挂载，我的商店更新不应该在父级在服务器中呈现并发送到浏览器之前更新商店吗？