我如何在路线更改时显示来自数据库的数据？

Question

我正在 vue.js + firebase 中开发类似 Messenger 的应用程序。我想做的是——在每次路由更改时，从数据库中获取一些与 id（存储在路由中）对应的数据，然后将其显示在屏幕上。我在处理这些数据时遇到了一些奇怪的行为，而且它没有按预期工作。

代码：

  methods: {
    getRoomName() {
      db.collection("rooms")
        .doc(this.params)
        .onSnapshot((snapshot) => (this.roomName = snapshot.data().name));
    },
  },
  watch: {
    $route(to, from) {
      this.getRoomName();
    },
  },

其中数据：

data() {
    return {
      input: "",
      roomName: "",
      params: this.$route.params.id,
      message: "",
      roomNameTest: "",
    };
  },

模板：<span class="roomName">{{roomName}}</span>

Answer 1

我注意到的第一件事是您在 data() 中调用 this.$route，它不起作用。如果您需要填充某些内容，请尝试使用 Vue Lifecycle Hooks.

Answer 2

生命周期钩子（mounted/created就是针对这些东西的，分别在vue实例创建和挂载时调用。

mounted() // it can also work for the created hook {
  this.getRoomName();
},

watcher 监视路由变化，但并不真正适合这种情况，因为在路由发生变化时，它正在监视的组件尚未实例化。当您正在观看的特定 Vue 实例分别为 instantiated/mounted 时，将触发 mounted/created 挂钩。

如果 url 上的参数发生变化并且您需要做一些事情，则使用观察器进行路由更改的合适时间。一个例子是改变 /users/1 to /users/2`。这将起作用，因为使用了相同的组件，观察者将检测到变化。

Answer 3

我正在使用 $route.path 来观察变化以获取新 ID。

组件

  computed: {
    ...mapState('products', ['products']),
  },
  watch: {
    '$route.path'() {
      this.bindProducts(this.IdFromUrl)
    },
  },

  mounted() {
    this.bindProducts(this.IdFromUrl)
  },

  methods: {
    ...mapActions('products', ['bindProducts']),
  }

我店里的运行 vuexfire 正在运行。或者，您可以绑定自己的数据。

我如何在路线更改时显示来自数据库的数据？

How do i display data from db on a route change?

javascript

firebase

vue.js

vuefire

google-cloud-firestore