如何断开组件 beforeDestroy 挂钩中的 Vuetify v-intersect 观察器？

Question

我正在使用 v-intersect 根据滚动事件修改 NavBar 内容。然后将数据记录到 Vuex Store。问题是当导航到不同的路线时，v-intersect 触发事件并修改意外更改 NavBar 内容的商店。 v-intersect.once 不适用于我的用例，但我想知道如何断开 v-intersect 观察者与 beforeDestroy 挂钩的连接？

<template>
  ...
  <div v-intersect="intersect" />
  ...
</template>

<script>
import { mapFields } from 'vuex-map-fields'

export default {
  computed: {
    ...mapFields(['isIntersecting']),
  },
  methods: {
    intersect(entries, observer) {
      this.isIntersecting = !!entries[0].intersectionRatio
    },
  },
}
</script>

Answer 1

指令实例应该被销毁，因此当父级被销毁时断开连接，这是指令工作的唯一正确方法。

停止接收事件可以使用v-if，也可以有条件地处理事件。如果销毁时存在竞争条件，则第二个选项适用，因此需要立即应用该行为：

beforeDestroy() {
  this.isIntersectionInactive = false;
}
...
intersect(entries, observer) {
  if (this.isIntersectionInactive)
    return;

  this.isIntersecting = !!entries[0].intersectionRatio
},

如何断开组件 beforeDestroy 挂钩中的 Vuetify v-intersect 观察器？

How do I disconnect Vuetify v-intersect observer in component beforeDestroy hook?

vue.js

vuetify.js