Vuex-persistedstate: Errors when using store.replaceState() in my project

[kylebradshaw]

Specifically when I am attempting to reset my state object to an initial point in time:

    store.replaceState(JSON.parse(JSON.stringify(initState))) 

if vuex-persistedstate is included in my application - I get these errors thrown

vue.common.js?e881:560 [Vue warn]: Error in callback for watcher "function () { return getter(this$1.state, this$1.getters); }": 
(found in <Root>)

vue.common.js?e881:1449 TypeError: Cannot read property 'fullPath' of undefined
    at Vue$3.store.watch.sync (eval at <anonymous> (app.js:2552), <anonymous>:21:16)
    at Watcher.run (eval at <anonymous> (app.js:723), <anonymous>:2553:19)
    at Watcher.update (eval at <anonymous> (app.js:723), <anonymous>:2527:10)
    at Dep.notify (eval at <anonymous> (app.js:723), <anonymous>:638:13)
    at Object.reactiveSetter [as $$state] (eval at <anonymous> (app.js:723), <anonymous>:868:11)
    at eval (eval at <anonymous> (app.js:761), <anonymous>:375:30)
    at Store._withCommit (eval at <anonymous> (app.js:761), <anonymous>:409:3)
    at Store.replaceState (eval at <anonymous> (app.js:761), <anonymous>:374:8)
    at eval (eval at <anonymous> (app.js:1468), <anonymous>:48:57)
    at wrappedMutationHandler (eval at <anonymous> (app.js:761), <anonymous>:598:5)
handleError @ vue.common.js?e881:1449
run @ vue.common.js?e881:2555
update @ vue.common.js?e881:2527
notify @ vue.common.js?e881:638
reactiveSetter @ vue.common.js?e881:868
(anonymous) @ vuex.esm.js?edaa:370
_withCommit @ vuex.esm.js?edaa:404
replaceState @ vuex.esm.js?edaa:369
(anonymous) @ mutations.js?90ae:50
wrappedMutationHandler @ vuex.esm.js?edaa:593
commitIterator @ vuex.esm.js?edaa:317
(anonymous) @ vuex.esm.js?edaa:316
_withCommit @ vuex.esm.js?edaa:404
commit @ vuex.esm.js?edaa:315
boundCommit @ vuex.esm.js?edaa:271
getStarted @ Home.vue?d594:46
boundFn @ vue.common.js?e881:126
invoker @ vue.common.js?e881:1660

[robinvdvleuten]

@kylebradshaw do you still have this issue? Can you add a runnable example on jsfiddle?

[davestewart]

I just had this the same error, in my own project, without vuex-persisted state - possibly it's a core Vue thing.

[Vue warn]: Error in callback for watcher "function () { return getter(this$1.state, this$1.getters); }": "TypeError: Cannot read property 'fullPath' of undefined"

(found in <Root>)
warn @ vue.esm.js?65d7:571
logError @ vue.esm.js?65d7:1683
globalHandleError @ vue.esm.js?65d7:1678
handleError @ vue.esm.js?65d7:1667
run @ vue.esm.js?65d7:3126
update @ vue.esm.js?65d7:3098
notify @ vue.esm.js?65d7:677
reactiveSetter @ vue.esm.js?65d7:994
(anonymous) @ vuex.esm.js?edaa:450
_withCommit @ vuex.esm.js?edaa:495
replaceState @ vuex.esm.js?edaa:449
__webpack_exports__.a.store.reset @ plugin.js?c2dd:30
(anonymous) @ VM49949:1
vue.esm.js?65d7:1687 

TypeError: Cannot read property 'fullPath' of undefined
    at Vue$3.store.watch.sync (index.js?7e73:21)
    at Watcher.run (vue.esm.js?65d7:3124)
    at Watcher.update (vue.esm.js?65d7:3098)
    at Dep.notify (vue.esm.js?65d7:677)
    at Object.reactiveSetter [as $$state] (vue.esm.js?65d7:994)
    at eval (vuex.esm.js?edaa:450)
    at Store._withCommit (vuex.esm.js?edaa:495)
    at Store.replaceState (vuex.esm.js?edaa:449)
    at Store.__webpack_exports__.a.store.reset (plugin.js?c2dd:30)
    at <anonymous>:1:7
logError @ vue.esm.js?65d7:1687
globalHandleError @ vue.esm.js?65d7:1678
handleError @ vue.esm.js?65d7:1667
run @ vue.esm.js?65d7:3126
update @ vue.esm.js?65d7:3098
notify @ vue.esm.js?65d7:677
reactiveSetter @ vue.esm.js?65d7:994
(anonymous) @ vuex.esm.js?edaa:450
_withCommit @ vuex.esm.js?edaa:495
replaceState @ vuex.esm.js?edaa:449
__webpack_exports__.a.store.reset @ plugin.js?c2dd:30
(anonymous) @ VM49949:1
undefined

If you click the error and set a breakpoint, you can find – I presume – the source:

[davestewart]

OK, the offending code is from vuex-router-sync:

https://github.com/vuejs/vuex-router-sync/blob/3c826bb089eb696fa6fe5460a62ecd27e22a7d6a/src/index.js

So I worked round this and performed a full app reset like so:

store.replaceState(Object.assign(initial, { route: store.state.route }))
app.$router.replace({path:'/'})
localStorage.clear()

Note that this code is not specific to vuex-persistedstate.

Hope this helps someone.

[robinvdvleuten]

@davestewart thanks for investigating this issue!

[hungphongbk]

I guess store.replaceState just replace entire current state object by another X object rather than doing some stuff like Object.assign(...) so it doesn't keep any parts of old state which doesn't contained on X like state created by vuex-router-sync. Did anyone think It's a bit confused?