search

MitsuhaKitsune / vuex-webextensions

A Vuex plugin to share store through webextensions components
MIT License
83 stars 30 forks source link

Problem with vue-router-sync #14

Closed mauri870 closed 5 years ago

mauri870 commented 5 years ago

When I tried to use this plugin along with vue-router-sync, the following error occur during route transitions:

vue-router.esm.js?8c4f:16 [vue-router] uncaught error during route navigation:
warn @ vue-router.esm.js?8c4f:16
abort @ vue-router.esm.js?8c4f:1904
iterator @ vue-router.esm.js?8c4f:1968
step @ vue-router.esm.js?8c4f:1717
step @ vue-router.esm.js?8c4f:1721
(anonymous) @ vue-router.esm.js?8c4f:1718
(anonymous) @ vue-router.esm.js?8c4f:1964
(anonymous) @ middlewares.js?cf9a:6
iterator @ vue-router.esm.js?8c4f:1943
step @ vue-router.esm.js?8c4f:1717
step @ vue-router.esm.js?8c4f:1721
runQueue @ vue-router.esm.js?8c4f:1725
confirmTransition @ vue-router.esm.js?8c4f:1972
transitionTo @ vue-router.esm.js?8c4f:1874
push @ vue-router.esm.js?8c4f:2273
push @ vue-router.esm.js?8c4f:2534
(anonymous) @ Login.vue?7463:67
Promise.then (async)
login @ Login.vue?7463:66
invoker @ vue.runtime.esm.js?2b0e:2023
Vue.$emit @ vue.runtime.esm.js?2b0e:2534
click @ vuetify.js?ce5b:1357
invoker @ vue.runtime.esm.js?2b0e:2023
fn._withTask.fn._withTask @ vue.runtime.esm.js?2b0e:1822
vue-router.esm.js?8c4f:1905 TypeError: Converting circular structure to JSON
    at stringify (<anonymous>)
    at PortImpl.postMessage (extensions::messaging:107)
    at Port.publicClassPrototype.(anonymous function) [as postMessage] (extensions::utils:138:26)
    at a.sendMutation (contentScript.js?9bbc:8)
    at a.hookMutation (contentScript.js?9bbc:7)
    at eval (contentScript.js?9bbc:4)
    at eval (vuex.esm.js?2f62:392)
    at Array.forEach (<anonymous>)
    at Store.commit (vuex.esm.js?2f62:392)
    at Store.boundCommit [as commit] (vuex.esm.js?2f62:335)
abort @ vue-router.esm.js?8c4f:1905
iterator @ vue-router.esm.js?8c4f:1968
step @ vue-router.esm.js?8c4f:1717
step @ vue-router.esm.js?8c4f:1721
(anonymous) @ vue-router.esm.js?8c4f:1718
(anonymous) @ vue-router.esm.js?8c4f:1964
(anonymous) @ middlewares.js?cf9a:6
iterator @ vue-router.esm.js?8c4f:1943
step @ vue-router.esm.js?8c4f:1717
step @ vue-router.esm.js?8c4f:1721
runQueue @ vue-router.esm.js?8c4f:1725
confirmTransition @ vue-router.esm.js?8c4f:1972
transitionTo @ vue-router.esm.js?8c4f:1874
push @ vue-router.esm.js?8c4f:2273
push @ vue-router.esm.js?8c4f:2534
(anonymous) @ Login.vue?7463:67
Promise.then (async)
login @ Login.vue?7463:66
invoker @ vue.runtime.esm.js?2b0e:2023
Vue.$emit @ vue.runtime.esm.js?2b0e:2534
click @ vuetify.js?ce5b:1357
invoker @ vue.runtime.esm.js?2b0e:2023
fn._withTask.fn._withTask @ vue.runtime.esm.js?2b0e:1822
Stormsher commented 5 years ago

It`s a bad idea too use this modules together. Extension messaging protocol can pass only structures that can be easily converted with JSON.stringify

You object contains recursion( you cannot do anything with it

mauri870 commented 5 years ago

Hmmm, interesting. Do you you have a solution in mind? Maybe only save the route path instead of the whole object like vue-router-sync does :confused:

Stormsher commented 5 years ago

I spend a lot of time to find out solutions for other lib... No chance to pass complexive objects via messaging...

Yeah for sure U can store only router name in store, it should works.

mauri870 commented 5 years ago

In order to solve this issue I created this package: https://github.com/mauri870/vuex-router-sync-fullpath

Instead of saving the whole route object(including the to and from cyclic objects) it only saves the current fullPath.