Nuxt.js：如何定义组件的mounted()中使用的常用方法，以及更改组件的数据答案

【问题标题】：Nuxt.js:How to define common method used in mounted () of component, and change data of componentNuxt.js：如何定义组件的mounted()中使用的常用方法，以及更改组件的数据
【发布时间】：2019-03-27 03:54:40
【问题描述】：

我想在组件的mounted()中检测滚动事件如下，并更改组件中使用的数据。

·组件

<script>
import checkScroll from '~/utils/checkScroll'

export default {
  ...
  data() {
    return {
      scrollPosition: 0
    }
  },
  mounted() {
    window.addEventListener(
      'scroll',
      checkScroll(this.scrollPosition, window.scrollY)
    )
  },
</script>

・utils/checkScroll.js

export default function checkScroll(scrollPosition, scrollY) {
  scrollPosition = scrollY
}

这种情况有两个问题

1.我想每次滚动都执行这个函数，但是这个函数只在第一次滚动时执行
2.组件内部this.scrollPosition的值不变。

如果是这样，它将如何工作？

【问题讨论】：

标签： javascript vue.js nuxt.js

【解决方案1】：

第一个问题不应该发生。如果您添加 eventListener，它将在您每次滚动时执行，并且我已在本地检查它按预期工作。但是您应该将一个函数传递给事件侦听器，但您传递的是已经执行的函数。

您可以从中返回结果并执行类似的操作

export default function checkScroll(event) {
  return window.scrollY;
}

mounted() {
    window.addEventListener("scroll", event => {
      this.scrollPosition = checkScroll(event);
    });
  }

这里是 CBS 的工作示例https://codesandbox.io/s/0qjkoox68v

【讨论】：