Updating user account is throwing a Vuex Error

[chiubaca]

Repro steps

1. go to Profile
2. update user account with a new password
3. inspect console and there is a large stack trace

[Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside mutation handlers."

(found in <Root>) vue.runtime.esm.js:619
Error: "[vuex] do not mutate vuex store state outside mutation handlers."
    assert vuex.esm.js:90
    enableStrictMode vuex.esm.js:789
    VueJS 4
    _saveUserData user.js:140
    update user.js:53
vue.runtime.esm.js:1888
    VueJS 7
    _saveUserData user.js:140
    update user.js:53

Cause
Not 100% sure, but running GoTrue.update in the auth vuex module is probably udpating the GoTrueAuth instance directly and not via Vuex mutation.

Solution
Might have to make another instance of GoTrue, capture the results of GoTrue.update, then push that result back into Vuex state via a mutation

[ttntm]

Hi, I just got the same warning/error from the attemptLogout method. It disappears when setting strict: false (and thus also in production), but that's certainly not a good "solution".

I commented out everything that had to do with SET_CURRENT_USER, so it does indeed seem like it's due to something that happens in state.GoTrueAuth.currentUser().

EDIT: yes, seems like netlify/gotrue-js#64 is dealing with it as well.

Here's the stack trace:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside mutation handlers."

(found in <Root>)
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
run @ vue.runtime.esm.js?2b0e:4570
update @ vue.runtime.esm.js?2b0e:4542
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
clearSession @ user.js?3020:183
Promise.then (async)
logout @ user.js?3020:72
eval @ user.js?0f9a:110
attemptLogout @ user.js?0f9a:109
wrappedActionHandler @ vuex.esm.js?2f62:792
dispatch @ vuex.esm.js?2f62:457
boundDispatch @ vuex.esm.js?2f62:347
local.dispatch @ vuex.esm.js?2f62:720
mappedAction @ vuex.esm.js?2f62:1005
logout @ NavAuth.vue?72bf:121
click @ NavAuth.vue?e190:17
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6917

vue.runtime.esm.js?2b0e:1888 Error: [vuex] do not mutate vuex store state outside mutation handlers.
    at assert (vuex.esm.js?2f62:94)
    at Vue.store._vm.$watch.deep (vuex.esm.js?2f62:834)
    at Watcher.run (vue.runtime.esm.js?2b0e:4568)
    at Watcher.update (vue.runtime.esm.js?2b0e:4542)
    at Dep.notify (vue.runtime.esm.js?2b0e:730)
    at User.reactiveSetter [as token] (vue.runtime.esm.js?2b0e:1055)
    at User.clearSession (user.js?3020:183)

[chiubaca]

interesting, thanks for highlighting netlify/gotrue-js#64 , i'll be sure to keep an eye on that