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

Question

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"

score 0 · Accepted Answer · answered Mar 11 '20 at 09:36

0

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.

answered Mar 11 '20 at 09:36

Renaud Tarnec

79,263
10
95
121

Hi, thanks for your response. I see the documentation before I ask my question but I don't understand how to use Firebase JS SDK after I use VuexFire binding. So I have to call db.collection('...') again in a different action or in the same "init()" action? Or I have to delete VuexFIre binding and use only Firebase JS SDK? – stasera Mar 11 '20 at 10:04
You can use them in parallel. If you have configured Firebase the way it is shown in this [document](https://vuefire.vuejs.org/vuexfire/#why), you can just call `db.collection('...')` **in a different action** that you call when you want to update the DB. Look at the code examples here: https://vuefire.vuejs.org/vuexfire/writing-data.html#updates-to-collection-and-documents – Renaud Tarnec Mar 11 '20 at 10:11
I only have to change the item for the Page View, not directly in the document of the database collection. I want to change documents AFTER receiving them. The guide explains how to update only one document in the collection. And I need the change just after the creation of the page. So the cycle will be Get data from DB -> Put data in the array (state) -> Change every object in the array ( object.data = dayjs(object.data) ) -> show the updated state in the Page View – stasera Mar 11 '20 at 10:45
1

[SOLVED] Hi Renaud, I did it! I used a getter with forEach function. getter(state) { state.ITEMS.forEach((ITEM) => { ITEM.data = dayjs(ITEM.data) .locale("it") .format("D MMMM YYYY") }) return state.ITEMS – stasera Mar 11 '20 at 10:58

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

1 Answers1