时间戳

首页 > 解决方案 > Firestore 部署后未反映 Firestore 中的更改

javascript - Firestore 部署后未反映 Firestore 中的更改

问题描述

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

它是一个简单的博客布局，具有博客文章的所有常用CRUD功能。它松散地基于带有 Firebase Cloud Functions和Nuxt.js Firebase Auth的Quick Nuxt.js SSR 原型。

在开发环境中它运行完美，但是当我部署它时，特别是 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

取消我的数组状态：帖子。

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

我究竟做错了什么 ：/

标签： javascriptfirebasegoogle-cloud-firestorenuxt.jsfirebase-hosting

解决方案

所以在失去了一些头发后，我终于想通了！

因此，在 NUXT 中，您有两种部署项目的选项，nuxt build或者nuxt generate.

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

在切换到该build选项并部署它之后，它一切都完美无缺。

推荐阅读