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

Posted 2023-02-22

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

【英文标题】：Manipulating documents in Firebase collection with Vuex [Vuex/Vuexfire]

【发布时间】：2020-06-22 21:53:21

【问题描述】：

我有一个简单的问题，但我找不到答案。 我正在使用 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”

【参考方案1】：

正如您将在 Vuexfire documentation 中看到的那样：

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

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

【讨论】：

您好，感谢您的回复。在我提出问题之前，我查看了文档，但是在使用 VuexFire 绑定之后，我不明白如何使用 Firebase JS SDK。所以我必须在不同的操作或相同的“init()”操作中再次调用 db.collection('...')？或者我必须删除 VuexFIre 绑定并仅使用 Firebase JS SDK？

您可以并行使用它们。如果您已按照此 document 中显示的方式配置 Firebase，则可以在想要更新数据库时调用db.collection('...')在不同的操作中。看这里的代码示例：vuefire.vuejs.org/vuexfire/…

我只需要更改页面视图的项目，而不是直接在数据库集合的文档中。我想在收到文件后更改文件。该指南解释了如何只更新集合中的一个文档。我需要在创建页面后进行更改。所以循环将是从数据库获取数据 -> 将数据放入数组（状态） -> 更改数组中的每个对象（ object.data = dayjs(object.data) ） -> 在页面视图中显示更新的状态

[已解决] 嗨 Renaud，我做到了！我使用了一个带有 forEach 函数的 getter。 getter(state) state.ITEMS.forEach((ITEM) => ITEM.data = dayjs(ITEM.data) .locale("it") .format("D MMMM YYYY") ) 返回 state.ITEMS