使用 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 不处理将数据写回 Firebase，因为您可以 直接使用 Firebase JS SDK 来精确更新你的任何东西 需要。

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