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.