使用装饰器时如何在VueJS中使用Data对象？ “预期由类方法'数据'使用的'this'。”

Question

错误>预期类方法“数据”将使用“ this”。

我确实找到了这个，并认为我在下面正确了： TypeScript Unexpected token, A constructor, method, accessor or property was 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>

Answer 1

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

但是data()不需要使用this（仅在极少数情况下）。

因此，您可能应该取消针对该特定方法的警告，因为我认为data()符合ESLint as a possible exception to that rule描述的情况：

  

例如，您可能有一个来自外部库的规范，该规范要求您将方法重写为常规函数（而不是静态方法），并且不使用函数体内的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>