[Vuejs]-Vue 3 Vuex how can I force a callback function to run asynchronously

0👍

"do not mutate Vuex store state outside mutation handlers"

This error only happens if you are changing Vuex state not from a mutation, or if the mutation is mutating state in an asynchronous way (i.e. after the mutation function has returned).

All my changes to the Vues variables are in a mutation handler using store.commit

Clearly the state is being mutated outside of a mutation, though.

After much debugging it appears that f() is called synchronously during the reactive code that is executed when mode changes and that Vuex treats all Vuex variables as part of one big variable so that modification to a second Vuex variable during the modification cycle of the first Vuex variable is a bad thing, hence the error.

Not sure if your conclusion is correct. It shouldn’t matter when f() is being called, as long as the state mutations are occurring synchronously within a mutation function.

How can I create a callback that executes after the entire reactive cycle of the Vuex variable is complete?

This is probably not the solution (XY problem).

It would be helpful if you could provide the line of code where the state mutation is happening that triggers the error.

Leave a comment