No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Check vuex store item loaded before showing any page

    Framework
    2
    3
    426
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • ssuess
      ssuess last edited by

      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!

      1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman last edited by

        @ssuess uncomment this line… export default function (/* { store, ssrContext } */) like this export default function ({ store } ) then you’ll have access to your store. you don’t need to import the store itself.

        1 Reply Last reply Reply Quote 1
        • ssuess
          ssuess last edited by

          omg, I can’t believe I missed that! Thank you!!!

          1 Reply Last reply Reply Quote 0
          • First post
            Last post