Warning: [vuex] state field "route" was overridden by a module with the same name at "route"

[Unkrass]

I use the following packages:

"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0",
"vuex-persistedstate": "^4.0.0-beta.3",
"vuex-router-sync": "^6.0.0-rc.1"

When I reload a page - and I believe it only happens when the state i persisted - I get the warning message

[vuex] state field "route" was overridden by a module with the same name at "route"

In my opinion this shouldn't be happening, because I didn't define any modules in my store. changing the module name to e.g. "RouteModule" as written in the docs throws the same warning, except then with "RouteModule" instead of "route".

Is there a way to fix this?

[denizderman]

Is vuex-router-sync going to support vue3? I believe this issue is related to that, but I might be wrong.

[mylemans]

Is vuex-router-sync going to support vue3? I believe this issue is related to that, but I might be wrong.

FYI: I'm having this issue on vue2 edit: Seem to trigger (or can trigger) during 'time travel', so for me I can ignore the issue, but I rather would not see that warning ofc

[jremi]

@Unkrass what you can do...

When you invoke the vuex-persistedstate plugin...

e.g:

import Vue from "vue";
import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex);

export default new Vuex.Store({
  plugins: [
    createPersistedState({
      // This omits the plugins/vue-router-sync state.route from persisting
      paths: ["foo", "bar", "zee"],
    }),
  ],
  state: {
    foo: {},
    bar: {},
    zee: {}
  }
});

The above is a simple contrived example... But what is important is passing to the createPersistedState options the paths and explicitly only setting the paths that are in the vuex state. When you do this the vuex-persistedstate plugin won't persist the automatically added state.route that vuex-router-sync injects.

This will make the warning not appear.

Hope this helps.