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

Posted 2023-02-18

【中文标题】使用装饰器时如何在 VueJS 中使用 Data 对象？ “预计 \'this\' 将由类方法 \'data\' 使用。”

【英文标题】：How to use the Data object in VueJS when using Decorators? "Expected 'this' to be used by class method 'data'."使用装饰器时如何在 VueJS 中使用 Data 对象？ “预计 'this' 将由类方法 'data' 使用。”

【发布时间】：2019-08-19 18:16:08

【问题描述】：

错误 > 类方法 'data' 应该使用 '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>

【问题讨论】：

这只是来自 linter。您可以在基本配置中覆盖它。如果你还没有，你也可以使用eslint-plugin-vue 来帮助使用指令和样式指南:)

谢谢@JohnRuddell！是的，静态也解决了这个问题，但我在 data() 方法中不需要这些变量。

哦，嘿，莱昂！没想到是你 :D

@JohnRuddell sup man hehe，这几天 Whoat 怎么样？顺便说一句，在 React/Typescript lmk 中构建这个你的想法：moon.holdings

哈哈我很久以前就从那个地方搬过来了！我们应该找个时间赶上 :) 我今晚去看看

【参考方案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>

【讨论】：

为每个 Vue 类写出忽略注释会很烦人。在.eslintrc 或其他东西中覆盖可能会更好