Как сохранять состояние компонентов в vue ssr?

Question

[testopikachu]

Привет, подскажите пожалуйста, возможно ли при серверном рендеринге vue сохранять состояния компонентов?

То есть получив в подобном компоненте данные на сервере, я потеряю их на клиенте и в this.data будет пусто.
Пример несколько утрированный, но все же, как не терять данные?

//test.vue
<template>
  {{data}}
</template>

<script>
  export default {
    data() {
      return {
        data: ''
      }
    },

    serverPrefetch() {
      axios.get('/api/get/1')
        .then(result => {
          this.data = result.data
        })
    },
  }
</script>

В документации рассказано как сохранить состояние vuex

//entry-server.js 
import { createApp } from './app'

export default context => {
  return new Promise((resolve, reject) => {
    const { app, router, store } = createApp()

    router.push(context.url)

    router.onReady(() => {
      context.rendered = () => {
        context.state = store.state //сохраняем состояние vuex
      }

      resolve(app)
    }, reject)
  })
}

//entry-client.js
import { createApp } from './app'

const { app, store, router } = createApp()

if (window.__INITIAL_STATE__) {
  store.replaceState(window.__INITIAL_STATE__) //загружем состояние vuex
}

router.onReady(function() {
  app.$mount('#app');
});

Вообщем то мне это нужно что бы решить проблему из вот этого вопроса - Как сделать форму с использованием vuex?
Я загружаю объект из vuex в компонент для редактирования, после нажатия кнопки сохранить, я выгружаю его обратно.

Но с ssr получается так что я вынужден вызывыть return this.$store.dispatch('fetch') сначала на сервере, а потом на клиенте.
Как это побороть?

Answer 1

[Klein Maximus]

В документации по Vue SSR описано, как сохранять состояние в хранилище. Применяемый в данном случае механизм подразумевает под собой хранение данных именно в Store.
Если гидратацию нужно применять и для компонентов, то нужно либо самостоятельно реализовать этот функционал, либо использовать уже сто-то готовое.
Например в UniversalVue или Nuxt.

P.S.: Повторного вызова return this.$store.dispatch('fetch') не будет, если Вы его делаете в asyncData, как описано в документации.