使用 Vuex 操作 Firebase 集合中的文档 [Vuex/Vuexfire]

Question

我有一个简单的问题，但找不到答案。我正在使用 Vuexfire 从 Vuex 中的 Firebase 导入数据。

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

它工作得很好，但我想操作集合中的每个文档 'ricettarioFirebase'。使用 vue + firebase 很容易，使用 .get() 和 .then()

我找不到解决办法！我认为使用 GETTERS 是最好的方法，但我是 Vuex 和 Vuexfire 的新手，所以我不知道该怎么做。

特别是，我想转换这个（经典的 firebase 命令）：

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

在 Vuexfire 中。因此，将 "ricettario[ ]" 中的每个对象更改为 "ricetta"，我想编辑 "ricetta.diffClass" 和 "ricetta.data"

Answer 1

正如您将在 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.

该文档提供了一些使用 "standard" JS SDK 的示例，与您在问题中所做的完全相同 ("classic firebase command")。所以你必须这样做，将数据库写入包装在 Vuex Actions.

使用 Vuex 操作 Firebase 集合中的文档 [Vuex/Vuexfire]

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

javascript

firebase

vue.js

vuex

vuexfire