Vue.js + Vuefire动态更新Firebase Ref问题求助

我来帮你梳理下问题根源，再给出具体的修复方案：

你当前的核心问题是：prevList对应的Firebase引用在模块初始化时就被固定了，后续即使daySelected通过EventBus更新，这个引用也不会跟着改变——因为模块级别的变量只会在加载时赋值一次，不会自动响应后续的变量变化。下面是分步修复方案：

1. 重构firebase.js，提供动态获取引用的方法 #

我们需要放弃固定导出prevList的写法，改成提供一个能根据日期生成引用的函数，同时修正EventBus回调里的this指向问题：

import { initializeApp } from 'firebase';
import moment from 'moment';
import Vue from 'vue';

export const EventBus = new Vue({
  data() {
    return {
      daySelected: moment().format('YYYYMMDD') // 默认设为当天日期
    };
  }
});

const app = initializeApp({
  apiKey: "...",
  authDomain: "...",
  databaseURL: "...",
  projectId: "...",
  storageBucket: "",
  messagingSenderId: "..."
});

const db = app.database();
// 封装获取当天引用的函数
export const getTodayRef = () => db.ref(moment().format('YYYYMMDD'));
// 封装根据指定日期获取引用的函数
export const getDateRef = (dateStr) => db.ref(dateStr);

// 用箭头函数修正this指向，确保能正确更新EventBus的daySelected
EventBus.$on('selectedDayEvent', (pickerValue) => {
  EventBus.daySelected = pickerValue;
});

export { db };

2. 调整列表组件，手动监听日期变化并加载数据 #

原来的组件依赖vuefire自动绑定固定引用，现在我们需要手动监听日期事件，动态获取对应引用并加载数据：

<template>
  <div id="list">
    <ul>
      <li v-for="(item, index) in currentList" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
import { getTodayRef, getDateRef, EventBus } from '../firebase';
import moment from 'moment';

export default {
  name: 'List',
  data() {
    return {
      currentList: [],
      currentRef: null // 保存当前监听的引用，用于销毁时取消监听
    };
  },
  mounted() {
    // 初始化加载当天数据
    this.loadList(getTodayRef());

    // 监听日期选择事件，动态切换数据
    EventBus.$on('selectedDayEvent', (pickerValue) => {
      const isToday = pickerValue === moment().format('YYYYMMDD');
      const targetRef = isToday ? getTodayRef() : getDateRef(pickerValue);
      this.loadList(targetRef);
    });
  },
  methods: {
    loadList(targetRef) {
      // 先取消之前的监听，避免内存泄漏
      if (this.currentRef) {
        this.currentRef.off();
      }
      this.currentRef = targetRef;
      // 监听Firebase数据变化并更新列表
      targetRef.on('value', (snapshot) => {
        const rawData = snapshot.val();
        // 如果Firebase返回的是对象，转成数组适配v-for
        this.currentList = rawData ? Object.values(rawData) : [];
      });
    }
  },
  beforeDestroy() {
    // 组件销毁前务必取消监听
    if (this.currentRef) {
      this.currentRef.off();
    }
  }
};
</script>

3. 简化日期选择器组件（可选优化） #

现在我们只需要通过EventBus传递选中的日期即可，不用同时触发两个事件：

<template>
  <datepicker v-on:selected="doSelection"></datepicker>
</template>

<script>
import moment from 'moment';
import Datepicker from 'vuejs-datepicker';
import { EventBus } from '../firebase';

export default {
  name: 'Header',
  data() {
    return {
      date: moment().format('LL'),
      openDatePicker: false
    };
  },
  methods: {
    doSelection(val) {
      const pickerValue = moment(val).format('YYYYMMDD');
      // 只需要触发这一个事件，列表组件会自己判断是否是当天
      EventBus.$emit('selectedDayEvent', pickerValue);
    }
  },
  components: { Datepicker }
};
</script>

为什么原来的写法失效？ #

• export const prevList = db.ref(${this.daySelected})在模块加载时就执行了，此时daySelected是初始值，之后即使变量更新，这个引用也不会重新创建；
• vuefire的firebase选项是组件初始化时绑定的，不会自动响应后续的引用变化，所以必须手动监听数据并更新列表。

这样调整后，当你选择不同日期时，列表会自动加载对应日期的Firebase数据，实现动态更新的效果。

内容的提问来源于stack exchange，提问作者omerkocaaga