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

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!

I think I have tracked this down to a most peculiar error on iOS. Namely that (on 12.2) if one has the PWA loaded in both Mobile safari AND standalone mode, clearing the cache with window.location.reload(true) does not work reliably. Reporting this as a bug with Apple…

I have a fairly standard layout (MyLayout.vue), the template section of which contains q-layout, inside of which is the q-header, q-drawer with my left hand links, q-page-container which contains my router view to my sub pages, and finally a q-dialog that shows when a button in my title bar is clicked on.

I do a check on launch to see if there is a version update, and perform a window.location.reload(true) if there is a new version (that does not match the one I have stored in localstorage).

All of this works well and seems to update the entire app (subpages and components included) with new content except for one odd difference: The text data inside that q-dialog does NOT get updated, except for a single string that is pulled from localstorage. To give an example, I add <strong></strong> tags around some of the content to bold it, and it does not show unless I force clear the cache, even though all the other parts of the app updated with my window.location.reload(true) call. Any idea why this might be happening?

@RishitKedia would you mind describing in a very high level, brief way how you used quasar to build this, and then how you implemented/integrated that work to make this extension? I am just really curious what the steps would be, and how quasar could even be used for this. Thanks!

Thanks, I am aware of the benefits of Vuex in some cases, but when an app is small enough there is not necessarily a reason to incur the overhead. That said, this particular app is approaching that size, so thanks for the reminder.

Ok, I solved this by doing the following:

1. Give each expansion item a model, and set it to false (closed) in the data object
2. Within each page component, define all of its levels in an object
3. On load, emit levels to top level layout
4. In top level layout, on emit receive run method to set each expansion item’s v-model to true

@s-molinari thanks! Your simple suggestion has actually allowed me to solve this problem AND the tree expansion problem here: https://forum.quasar-framework.org/topic/3403/v1-q-expansion-item-open-tree-when-route-is-active

I will try that @s-molinari thanks for the suggestion

ok I found a solution for this (although a toggle would be nice so I don’t have to resort to this):

@show="openRoute('/myroute')" @hide="openRoute('/myroute')"

with a method defined in my file that takes care of this:

openRoute (route) {
      this.$router.push(route)
    }

The bad part about this is that now the expansion item no longer realizes when it is active, so I will have to add some logic to take care of the active class as well. This whole thing would be made much easier if q-expansion item just allowed both routes and open actions at the same time natively.