2

Need some clarity regarding Vuex and SSR here. Don't know what concept I'm not getting right since this is my first time working with SSR. I'm trying to create breadcrumbs for my application using the store. The concept is that the parent component will show the breadcrumbs and children components will set the breadcrumbs in the store. Now, whenever the server renders, it is only rendering the initial state of the breadcrumb and only updating after hydration, resulting in wrong breadcrumbs for a few seconds.

In pseudocode:

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")
}

Shouldn't the parent component only render after all children have been created? How does that lifecycle work and how can I guarantee that the parent will be updated before sending the response from the server?

Edit:

Created an example that shows the behavior https://codesandbox.io/s/vuex-module-test-dmoe6?file=/pages/index.vue

You can see that the state userName is only updated after a few moments showing "NoName" the initialized state value before updating it to JohnDoe.

Theo
  • 465
  • 3
  • 15

1 Answers1

1
  • Add wrapper for parent and child as templates must have a single root element.
  • Yes, parent should be mounted after all children were created.
  • Parent-child lifecycles
  • Try to use getter instead of directly calling store
vintprox
  • 931
  • 1
  • 11
  • 24
Dvdgld
  • 1,984
  • 2
  • 15
  • 41
  • This is only pseudocode but I fixed the template single root to avoid confusion. I understand the Parent-child lifecycles but my question is more on the topic of Server side rendering. If the child gets created and mounted before the parent, shouldn't my store update update the store before the parent renders in server and sends to the browser? – Theo May 18 '20 at 19:12