Привет, подскажите пожалуйста, возможно ли при серверном рендеринге 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') сначала на сервере, а потом на клиенте.
Как это побороть?
Средний
