VueFire 3 causes "do not mutate vuex store state outside mutation handlers"

84 Views Asked by At

I'm currently migrating a project and trying to figure out what the Vue3, VueFire3, VueX pendant to the following Vue2 + Vuexfire code is:

//actions.ts
[...]
  bindDummy: firestoreAction((
    { bindFirestoreRef }) => {
    return bindFirestoreRef(
         "dummyVariable",
         collectionDummy)
  }),
[...]

//state.ts
function state (): dummyState {
  return {
    dummyVariable: {}
  };
}

This is a setting up a binding to a variable in the VueX state called nameOfVariableInState. The variable will be updated automatically when the data in the firestore database changes).

I tried

// actions.ts
bindDummy ({ commit }) {
  const todos = useCollection(dummyCollection);
  if (todos.data) {
     commit("setDummy", todos.data)
   }
}

// mutations.ts
const mutation: MutationTree<DummyStateInterface> = {

  setDummy (state, value) {
    state.dummyVariable = value;
  },
};

This works to the extend that the data is displayed and automatically updated BUT this triggers Uncaught Error: [vuex] do not mutate vuex store state outside mutation handlers.. In the cryptic stacktrace walkSet vuefire.823f1be4.mjs:29 appears.

0

There are 0 best solutions below