Vue 在不刷新的情况下不会从 Firestore 获取更改答案

【问题标题】：Vue doesnt get changes from Firestore without refreshingVue 在不刷新的情况下不会从 Firestore 获取更改
【发布时间】：2021-10-28 06:40:27
【问题描述】：

我正在尝试在 vue 中制作一个任务跟踪器应用程序。我几乎完成了这个项目，当我意识到当我添加一个任务时，它会进入任务视图但是当我尝试更改提醒时（它是一个布尔值，当我双击任务时，它会更改值）直到我没有任何反应重新加载页面。这是代码主页.vue

<template>
  <AddTask v-show="showAddTask" @add-task="addTask" />
  <Tasks
    @toggle-reminder="toggleReminder"
    @delete-task="deleteTask"
    :tasks="tasks"
  />
</template>

<script>
import Tasks from '../components/Tasks'
import AddTask from '../components/AddTask'
import firebase from 'firebase'
import Login from './Login'
import Signup from './Signup'
export default {
  name: 'Home',
  props: {
    showAddTask: Boolean,
    
  },
  components: {
    Tasks,
    AddTask,
    Login,
    Signup,
  },
  data() {
    return {
      tasks: [],
      myiid:''
    }
  },
  methods: {
    addTask(task) {
      this.tasks.push(task)
      firebase.auth().onAuthStateChanged((user) => {
        if (user) {
          firebase
          .firestore()
          .collection(user.uid)
          .add(task).then((docRef) => {
            this.myiid = docRef.id
            firebase.firestore().collection(user.uid).doc(this.myiid).update({id: this.myiid})
            console.log(docRef.id)
            
          })
          
        }     
      })
      this.myiid = ''
    },
    deleteTask(id) {
      firebase.auth().onAuthStateChanged((user) => {
        if (user) {
          if (confirm('Are you sure?')) {
            firebase.firestore().collection(user.uid).get().then((querySnapshot) =>{
              querySnapshot.forEach((doc)=> {
                if (doc.ref.id == firebase.firestore().collection(user.uid).doc(id).id) {
                  doc.ref.delete();
                }
              (this.tasks = this.tasks.filter((task) => task.id !== id))
            })
          })
      }
        }
      })
    },
    toggleReminder(id) {

      firebase.auth().onAuthStateChanged((user) => {
        if (user) {
          firebase.firestore().collection(user.uid).get().then((documentSnapshot) =>{
            documentSnapshot.forEach((doc)=> {
              if (doc.data().id === id) {
                doc.ref.update({reminder: !doc.data().reminder })
                this.tasks = this.tasks.map((task) =>
                  task.id === id ? { ...task, reminder: !doc.data().reminder } : task)
              }
              })
          })
        }
     })
    },
    fetchTasks() {
      firebase.auth().onAuthStateChanged((user) => {
        if (user) {
          var uid = user.uid
          firebase.firestore().collection(uid).get().then((querySnapshot) => {
            querySnapshot.forEach((doc)=>{
            this.tasks = [...this.tasks, doc.data()]
             })
          })
        }
      })
    }
  },
  async created() {
    this.fetchTasks()
  }
}
</script>

如果您想自己检查，这是我的应用程序的链接

【问题讨论】：

标签： javascript firebase vue.js google-cloud-firestore

【解决方案1】：

您的fetchTasks 函数使用get() 从Firestore 读取数据，这意味着它是reads data only once。如果您想读取一次数据并继续收听realtime updates，则需要使用onSnapshot() 而不是get()

fetchTasks() {
  firebase.auth().onAuthStateChanged((user) => {
    if (user) {
      var uid = user.uid
      firebase.firestore().collection(uid).onSnapshot((querySnapshot) => {
        this.tasks = querySnapshot.docs.map((doc) => doc.data());
      })
    }
  })
}

【讨论】：