Check vuex store item loaded before showing any page
-
I need to verify that an item (or items) exist in my vuex store before loading any page, and after looking around on the internet, it would seem that the way to go is to check for this before exporting Router in
src/router/index.js
However, when I attempt to do just that, I get an error that $root is undefined. I can’t seem to access ANY properties on my store from within this file. Here is my code:
import Vue from 'vue' import VueRouter from 'vue-router' import routes from './routes' import VueLocalForage from 'vue-localforage' import store from '../store' Vue.use(VueLocalForage) Vue.use(VueRouter) Vue.prototype.$bus = new Vue() /* * If not building with SSR mode, you can * directly export the Router instantiation */ export default function (/* { store, ssrContext } */) { const Router = new VueRouter({ scrollBehavior: () => ({ y: 0 }), routes, // Leave these as is and change from quasar.conf.js instead! // quasar.conf.js -> build -> vueRouterMode // quasar.conf.js -> build -> publicPath mode: process.env.VUE_ROUTER_MODE, base: process.env.VUE_ROUTER_BASE }) console.log(store) const waitForStorageToBeReady = (to, from, next) => { if (!store._vm.$root.$data['vuexPersistStateRestored']) { store._vm.$root.$on('vuexPersistStateRestored', () => { next() }) } else { next() } } Router.beforeEach(waitForStorageToBeReady) return Router }
console.log(store._vm)
returns ‘undefined’ (as does $vm, $root, etc).console.log(store)
returns partial text that is confusing to me:ƒ () /* { ssrContext } */ { var Store = new vuex__WEBPACK_IMPORTED_MODULE_1__["default"].Store({ modules: { rstruth: _rstruth__WEBPACK_IMPORTED_MODULE_4__["default"] }, plugins: [vu…
Any suggestions? What am I doing wrong? Thanks!
-
@ssuess uncomment this line…
export default function (/* { store, ssrContext } */)
like thisexport default function ({ store } )
then you’ll have access to yourstore
. you don’t need to import the store itself. -
omg, I can’t believe I missed that! Thank you!!!