javascript - 使用 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文档中看到的那样：

Vuexfire不处理将数据写回 Firebase，因为您可以直接使用 Firebase JS SDK 来精确更新您需要的任何内容。

该文档提供了一些使用“标准”JS SDK 的示例，就像您在问题中所做的一样（“经典 firebase 命令”）。所以你必须这样做，将数据库写入包装在 Vuex Actions中。