Vue.js 2 Web Development Projects

Restoring the Vuex state on the client

The store state is serialized by the server on a __INITIAL_STATE__ variable in the HTML page. We can use this to set the state even before the app is mounted, so the components will have access to it.

Edit the entry-client.js file and use the store.replaceState method before mounting the app:

createApp({  locale,}).then(({ app, store }) => {  if (window.__INITIAL_STATE__) {    store.replaceState(window.__INITIAL_STATE__)  }  app.$mount('#app')})

Now, the store will have the data sent by the server.