Nuxt는 페이지를 렌더링하고 반환하기 전에 Vuex 상태를 업데이트해야 하지 않을까?

Nuxt는 페이지를 렌더링하고 반환하기 전에 Vuex 상태를 업데이트해야 하지 않을까?

여기에서 Vuex 및 SSR에 대한 명확한 설명이 필요함.SSR은 처음이라 어떤 컨셉이 맞는지 모르겠어.나는 상점을 이용하여 나의 어플리케이션에 사용할 빵가루를 만들려고 한다.상위부품이 빵가루를 보여주고, 아이부품이 매장에 빵가루를 설정하는 개념이다.지금은 서버가 렌더링할 때마다 빵 부스러기의 초기 상태를 렌더링하고 수화 후에만 업데이트해 몇 초간 빵 부스러기가 잘못 전달된다.

유사 코드:

상위.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을(를) JohnDoe로 업데이트하기 전에 초기화된 상태 값을 "NoName"으로 표시하는 몇 분 후에만 업데이트됨을 알 수 있다.

• 템플릿으로 상위 및 하위 래퍼 추가에는 단일 루트 요소가 있어야 한다.
• 그렇다, 모든 아이들이 만들어진 후에 부모가 올라타야 한다.
• 부모-자녀 라이프사이클
• 상점에 직접 전화하는 대신 getter를 사용해 보십시오.

참조URL: https://stackoverflow.com/questions/61875337/shouldnt-nuxt-update-vuex-state-before-rendering-and-returning-a-page