I have a question about using Vuexfire to import data from Firebase in Vuex.
const state = {
ricettario: [] // contains all recipe objects
}
const actions = {
init: firestoreAction(({ bindFirestoreRef }) => {
bindFirestoreRef('ricettario', db.collection('ricettarioFirebase'))
}),
}
While the current setup works perfectly for importing data, I am struggling with manipulating each document within the 'ricettarioFirebase' collection. In Vue.js and Firebase, this was easily done with .get() and .then().
I believe that utilizing GETTERS could be the solution, but as a newcomer to Vuex and Vuexfire, I am unsure of the correct approach.
In essence, I want to convert the traditional Firebase command shown below into Vuexfire:
db.collection("ricettarioFirebase")
.orderBy("data")
.get()
.then(snapshot => {
snapshot.forEach(doc => {
let ricetta = doc.data();
ricetta.data = dayjs(ricetta.data)
.locale("it")
.format("D MMMM YYYY");
ricetta.diffClass = ricetta.diff.split(" ").join("_");
this.ricettario.push(ricetta);
});
});
Within Vuexfire, my goal is to transform each object in 'ricettario[]' into "ricetta" and then modify the properties such as "ricetta.diffClass" and "ricetta.data".