VueX store is unavailable on new pages

[mtancoigne]

Hi !

I use VueX to manage the app's state. It works fine on the defaultPage but I can't navigate to views that uses it:

// Works on defaultPage
computed: {
  isAuth(){ return this.$store.getters.isAuth }
}
// This error shows up when trying to navigate to a page that does the same:
//   [Vue warn]: Error in render: "TypeError: Cannot read property 'getters' of undefined"
// and the pages does not renders.

The whole $store object is not available to new views; I guess it also may be the same for other objects/plugins

---

• navigator version: 0.0.3
• nativescript: 5
• nativescript-vue: 2.0.2
• VueX: 3.0.1

[jeremy-saidani]

Hi,

Same problem for me, did you find a solution ?

[mtancoigne]

Absolutely not; I continue to use a messy workaround to handle routes.

[jeremy-saidani]

Do you use this._vm.$navigateTo() in actions ? If I use this, the store will be undefined in next page But if a use this.$navigateTo() in component, it works great

[mtancoigne]

I used this.$navigateTo()

[wpatter6]

It seems like what is actually happening is that child components of the navigated to component are not getting the store, but the parent is. Another work around is to bubble events up to the parent and have that access the store. Obviously not ideal, but possibly this info helps solve the bug...

[jawa-the-hutt]

You can work around this issue with a local copy of the plugin as you'll have to edit it directly.

You'll have to replace this.$navigateTo(matchedRoute.component, options) with topmost().currentPage.__vuePageRef__.$navigateTo(matchedRoute.component, options) here: https://github.com/nativescript-vue/nativescript-vue-navigator/blob/1109e11141ffa55e80797ca20564f322e2c5249f/index.js#L52

And replace this.$navigateBack.call(this, args) with topmost().currentPage.__vuePageRef__.$navigateBack.call(this, args) here: https://github.com/nativescript-vue/nativescript-vue-navigator/blob/1109e11141ffa55e80797ca20564f322e2c5249f/index.js#L55

That being said....I have no idea of this is a good workaround or not. I've put a question out to @rigor789 to see if this is something that should be done or not.

FYI, came across this method as a possibility here: https://github.com/nativescript-vue/nativescript-vue/issues/365

[jawa-the-hutt]

fyi, here's a repo that reproduces the issue: https://github.com/jawa-the-hutt/ns-vue-navigator-test

it does NOT include the workaround in my previous comment.

[errozero]

I have the same problem, it happens to the main component that was navigated to. I have an app with 2 screens, one uses the store, if I navigate away and come back, the store is no longer available.

I worked around it by importing the store into each component that requires it instead of injecting it into the Vue instance.

[rigor789]

Generally the issues is most likely due to the "weird" parent/child relations between navigated components (I have plans to improve this, but it wasn't straight-forward when I last worked on it). Does setting Vue.prototype.$store = store in your main file solve the issues? (I've been recommending this for a while now, as this should prevent issues like these - but looking at the docs now it's not mentioned anywhere 🤔 )

[wpatter6]

Setting the prototype seems to have fixed it for me

[KinsleySen]

Generally the issues is most likely due to the "weird" parent/child relations between navigated components (I have plans to improve this, but it wasn't straight-forward when I last worked on it). Does setting Vue.prototype.$store = store in your main file solve the issues? (I've been recommending this for a while now, as this should prevent issues like these - but looking at the docs now it's not mentioned anywhere thinking )

works like a charm