Vue中Firestore的limit方法如何正确引用data内的page变量

你遇到的报错是因为firestore选项直接声明为对象时，查询语句会在组件实例初始化完成前执行，此时this并不指向当前组件实例，自然无法读取到data中定义的page变量。

1. 静态读取page值（仅初始化时读取一次） #

将firestore选项从对象改为函数形式，vuefire会在组件实例初始化完成后再执行该函数，此时this已经绑定为组件实例，可以正常访问this.page：

export default {
  data() {
    return {
      page: 1,
    }
  },
  methods: {
  },
  // 改为函数形式，返回需要绑定的集合配置
  firestore() {
    return {
      Words: db.collection("Words").where("incomplete", "==", true).limit(this.page)
    }
  },
}

2. 动态响应page变化（分页场景适用） #

如果后续page会动态修改（比如点击下一页切换页码），需要额外加监听器，在page变化时重新绑定Firestore查询：

export default {
  data() {
    return {
      page: 1,
    }
  },
  watch: {
    // 监听page变化，重新绑定查询
    page(newVal) {
      this.$bind('Words', db.collection("Words").where("incomplete", "==", true).limit(newVal))
    }
  },
  firestore() {
    return {
      Words: db.collection("Words").where("incomplete", "==", true).limit(this.page)
    }
  },
}

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