如何在路由更改时显示来自 db 的数据？

Posted 2023-02-22

【中文标题】如何在路由更改时显示来自 db 的数据？

【英文标题】：How do i display data from db on a route change?

【发布时间】：2021-01-03 07:34:49

【问题描述】：

我正在 vue.js + firebase 中开发一个类似 Messenger 的应用程序。我想做的是 - 在每次路由更改时，从 db 中获取一些对应于 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>

【问题讨论】：

您能否详细说明“奇怪的行为”究竟是什么意思？我注意到的第一件事是您在 data() 处调用 this.$route，它不起作用。如果您需要填充某些内容，请尝试使用 Vue vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks

我一删除数据中的 this.$route 并将其直接移动到函数中，它就开始按预期工作。谢谢！

我会详细说明一个答案，请接受它以帮助其他人:)

【参考方案1】：

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

【参考方案2】：

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

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

watcher 监视路由更改，但并不真正适合这种情况，因为当路由更改时，它正在监视的组件尚未实例化。当您正在观看的特定 Vue 实例分别被实例化/挂载时，将触发挂载/创建的钩子。

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

【讨论】：

感谢您的回答！在我的情况下，我将路线从 rooms/id_of_the_room 更改为 rooms/id_of_another_room 所以我认为在这种情况下很好。非常感谢一些关于生命周期钩子的信息

id 使用的是同一个组件吗？

yup ``` 路径：'/rooms/:id'，名称：'Pokoje'，组件：主页，，```

那没关系。它应该工作。你说它在 $route 对象被放入函数时起作用。你到底想发生什么。顺便说一句，第一次创建组件时，观察者不工作（当组件被路由到或刷新浏览器时会发生这种情况）。在这些情况下，您将需要一个 created 或 mounted 挂钩。这或许可以解释。观察者随后工作（在这种情况下，当在同一个组件中从参数导航到参数时。您可以阅读有关 vue 生命周期挂钩的更多信息here。

【参考方案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。 或者，您可以绑定自己的数据。