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