Manipulating documents in Firebase collection with Vuex [Vuex/Vuexfire]

I've a simple question but I can't find the answer. I'm using Vuexfire to import data from Firebase in Vuex.

const state = {
    ricettario: [] // data that contains all recipes (objects)
}
const actions = {
    // Get data from Firebase
    init: firestoreAction(({ bindFirestoreRef }) => {
        bindFirestoreRef('ricettario', db.collection('ricettarioFirebase'))
    }),
}

It works perfectly but I want to manipulate every document of the collection 'ricettarioFirebase'. With vue + firebase was easy, with .get() and .then()

I can't find a solution! I thought using GETTERS is the best way to do that but I'm new with Vuex and Vuexfire so I don't know how to do that.

In particular, I want to convert this (classic firebase command):

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);
        });
      });

In Vuexfire. So change every object in the "ricettario[ ]" will be "ricetta", and I want to edit the "ricetta.diffClass" and "ricetta.data"

As you will see in the Vuexfire documentation:

Vuexfire does not handle writing data back to Firebase because you can directly use the Firebase JS SDK to precisely update whatever you need.

The doc gives some example of use of the "standard" JS SDK, exactly like you did in your question ("classic firebase command"). So you'll have to go this way, wrapping the database writes in Vuex Actions.