javascript - 使用装饰器时如何在 VueJS 中使用 Data 对象？“预计 'this' 将被类方法 'data' 使用。”

Question

错误 > 类方法“数据”应使用“此”。

我确实找到了这个，并认为我在下面正确： TypeScript Unexpected token, A constructor, method, accessor or property is expected

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { MOON_HOLDINGS_LINK, TWITTER_LINK } from '@/constants/links'

@Component
export default class HelloWorld extends Vue {
  @Prop() private title!: string

  data(): any {
    return {
      moonLink: MOON_HOLDINGS_LINK,
    }
  }
}
</script>

标签： javascriptvue.jsvuejs2decorator

Answer 1

这是由于 ESLint 的class-methods-use-this规则。

但data()不应该需要使用this（仅在非常罕见的情况下）。

因此，您可能应该禁止该特定方法的警告，因为我认为data()符合ESLint 描述的场景作为该规则的可能例外：

例如，您可能有来自外部库的规范，要求您将方法覆盖为常规函数（而不是静态方法）并且不在this函数体内使用。

所以你会使用：

/*eslint class-methods-use-this: ["error", { "exceptMethods": ["data"] }] */

例子：

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { MOON_HOLDINGS_LINK, TWITTER_LINK } from '@/constants/links'

@Component
export default class HelloWorld extends Vue {
  @Prop() private title!: string

  /*eslint class-methods-use-this: ["error", { "exceptMethods": ["data"] }] */
  data(): any {
    return {
      moonLink: MOON_HOLDINGS_LINK,
    }
  }
}
</script>