Firestore 部署后未反映 Firestore 中的更改答案

【问题标题】：Firestore not reflecting changes in firestore after deployedFirestore 部署后未反映 Firestore 中的更改
【发布时间】：2020-10-15 06:34:49
【问题描述】：

我有一个用 NUXT 编写的网络应用程序，它使用了 Firebase 的托管、Firestore、身份验证和存储。

它是一个简单的博客布局，具有所有常见的CRUD 博客帖子功能。它松散地基于Quick Nuxt.js SSR prototyping with Firebase Cloud Functions 和Nuxt.js Firebase Auth。

在开发环境中它运行良好，但是当我部署它时，Firestore 的行为特别出乎意料。

因此，在项目部署后，我可以在 Firebase 控制台 Firestore 查看器中按预期反映的 CRUD 文档，但是当我再次读取数据时，它会加载相同的数据。换句话说，如果我删除一个文档，它将在 Firestore 查看器中消失，但是当我刷新我的 NUXT 网站时，它会再次加载该文档，即使它不再存在于 Firebase 控制台中。我在不同的计算机/设备上得到相同的结果，所以不是本地缓存问题。

我注意到，Firestore 查看器中的更改只会在我重新部署项目后反映在我的网站中。但我所做的任何更改在我刷新网站后都不会显示，即使它们已在 Firestore 查看器中永久更改。

当它在开发中完美运行时，我可以操作数据库、刷新，它会准确加载 Firestore 查看器中反映的内容。

很抱歉重复了这么多，但我在这里遇到了生存危机，哈哈。

下面是 NUXT 商店的 index.js 文件的示例，您可以在其中存储应用程序的所有数据。它可以完美地处理 Firestore 上的数据，但一旦投入生产，网站就会一遍又一遍地获得相同的数据。

import { firestore } from '~/plugins/fireinit.js' // the part where `firebase.initializeApp` happens

Decare 我的数组状态：帖子。

export const state = () => ({
  posts: []
})

用于操作帖子数组的突变。

export const mutations = {
  addP (state, payload) { // Gets run for each documents from collection on first load.
    state.posts.push(payload);
  },
  delP (state, payload) { // Deletes a post from the posts state.
    state.posts = state.posts.filter(p => {
      return p.id != payload.id;
    });
  },
}

nuxtServerInit() 在服务器上运行，使其在网站首次加载时呈现在服务器端。

export const actions = {
    async nuxtServerInit({commit}, context) {
        await firestore.collection('posts').get().then((querySnapshot) => {
            querySnapshot.forEach(function(doc) {
                var obj = doc.data()
                obj.id = doc.id;
                commit('posts/addP', obj)
            })
        })
    },

deletePost() 操作会删除 Firebase 存储上的文件，然后删除 Firestore 上的文档。然后最终从帖子状态中删除该项目。

    deletePost ({commit}, payload) {
      storage.ref().child(payload.fullPath).delete().then(function() {
        firestore.collection('posts').doc(payload.id).delete().then(()=>{
          commit('delP', payload);
        })
        .catch((error)=>{
          console.error(error);
        });
      })
    }
}

这就是我的 Firestore 规则的样子

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read;
      allow write: if request.auth != null;
    }
  }
}

我做错了什么：/

【问题讨论】：

标签： javascript firebase google-cloud-firestore nuxt.js firebase-hosting

【解决方案1】：

所以在脱发后我终于想通了！

因此，在 NUXT 中，您有两个部署项目的选项，nuxt build 或 nuxt generate。

generate 选项读取数据库，然后从 Firestore 构建静态文件，然后部署。这就是为什么当我重新加载我的页面时，它会将所有旧条目都输入数据库。

在切换到 build 选项并进行部署后，一切正常。

【讨论】：