ssr, preFetch and store : have to go to $store._vm._data.$$state

[Coude]

Hello,

I am using Quasar for ssr. I am fetching data from strapi cms (which is on the same server as quasar).

I am using prefetch and vuex according to what I understood from the docs.

I am seeing the data I want to see on my page BUT, as you will see below, I have to dig to " this.$store._vm._data.$$state.cms.all " to get them. Why? I do not know what I did wrong or what might be wrong. If you need any other info to answer, just ask, I would like to undestand what is wrong or what I misundestood (I am new to vuex, not too new to quasar/vue etc though) :).

Thank you!

  preFetch ({ store, currentRoute, previousRoute, redirect, ssrContext, urlPath, publicPath }) {
    return store.dispatch('cms/getDataFromServer', {url:'http://localhost:1337/home'})
  },
(...)
  mounted: function () {
    this.$store.registerModule('cms', cms, { preserveState: true });
    console.log(this.$store, this.$store._vm._data.$$state.cms.all);
    this.home = this.$store._vm._data.$$state.cms.all; // WHY??
  },

the index store is as follow:

import Vue from 'vue';
import Vuex from 'vuex';

import cms from './cms'

Vue.use(Vuex)

export default function (/* { ssrContext } */) {
  const Store = new Vuex.Store({
    modules: {
      cms
    },

    // enable strict mode (adds overhead!)
    // for dev mode and --debug builds only
    //strict: process.env.DEBUGGING
  })

  return Store
}

action.js

import { axiosInstance } from '../../boot/axios.js';

async function getDataFromServer ({ commit }, param) {
  return axiosInstance.get(param.url).then(({ data }) => {
    commit('create', data)
  })
}

export { getDataFromServer };

[beets]

@Coude This sounds strange, I’ll start by asking that you’ve tried

    this.home = this.$store.state.cms.all;

Edit: also, you could try making a getter, and using

    this.home = this.$store.getters['cms/someGetterMethod']

[Coude]

@beets
Thank you for your answer. Of course I’ve tried this.home = this.$store.state.cms.all; (That’s why I have those console.log, because I tried to find if it was hidden somewhere, and it was!).

And, that’s what I thought about during sleep : I did not make a getter.

[metalsadman]

@Coude try mounted ().

[Coude]

@metalsadman I just tried it, it does not change anything.
I added getters, it works better.

One issue I have, it’s that I am not able to lazy-register my stores. I’ve tried many many different things and I am getting hydration issue (likely due to data difference between front and ssr) and vuex namespace duplicates. So, for now, I am registering my vuex modules/stores globally in the index, it is not optimal but at least it is working!