vuex-router-sync

[John]

The migration guide lists various use cases for app plugins, among them the usage of vuex-router-sync:

You want to interfere with the Vuex store instance - An example would be to use vuex-router-sync package

So that’s what I want to do, but I must miss something, because I can’t figure out how. First I installed the package ‘vuex-router-sync’ from here.

https://github.com/vuejs/vuex-router-sync

Then I created an app plugin called ‘router.js’ like this

// import something here
import { sync } from 'vuex-router-sync'

// leave the export, even if you don't use it
export default ({ app, router, store, Vue }) => {
 // setup sync
 const unsync = sync(store, router)
}

and registered the plugin in quasar.conf.js. The default function is called, I checked this. However, I cannot access the route from the state property in the store so it doesn’t get extended. What am I missing?

Greetings,
John

[John]

Okay got it. If you read the vuex documentation (https://vuex.vuejs.org/en/modules.html) carefully, not like I did, then you will find out that the ‘rootState’ is always passed on as third argument:

Also, inside module getters, the root state will be exposed as their 3rd argument…

This will allow you to access the route plugin and state.

[Evertvdw]

Hello there, I’m having trouble getting this to work and I don’t know why. I’m using quasar v1 and have a boot file that is being called (I checked) with the code above. However when I inspect the rootState object available in an action in the store I don’t have any route property. Anyone any ideas?

[quang]

As of 5-26-2020, this works for me, boot file name router.js, not using vuex modules.

import { sync } from 'vuex-router-sync';
import { boot } from 'quasar/wrappers';

export default boot(({ router, store }) => {
  sync(store, router);
});