如何解决在 Ionic Vue 方法的嵌套范围内定义“this”时的 ESLint 错误

Posted 2023-02-22

【中文标题】如何解决在 Ionic Vue 方法的嵌套范围内定义“this”时的 ESLint 错误

【英文标题】：How to resolve ESLint error in defining `this` inside nested scope in Ionic Vue method

【发布时间】：2021-04-29 05:49:48

【问题描述】：

我有一个 Ionic Vue 应用程序，它使用 slides 组件在每次转换时修改反应属​​性。相关代码是这样的：

<script lang="ts">
import  IonPage, IonContent, IonSlides, IonSlide, from '@ionic/vue'

export default 
  name: 'Splash',
  components:  IonPage, IonContent, IonSlides, IonSlide,,
  data() 
    return 
      contentClass: 'bg-gradient-1',
    
  ,
  setup() 
    const slideOpts = 
      autoplay: 
        delay: 4000,
      ,
        
    return  slideOpts 
  ,
  methods: 
    slideChange( target ) 
      const vm = this
      target.getActiveIndex().then((i) => 
        vm.contentClass = 'bg-gradient-' + i
      )
    ,
  ,

</script>

这会产生以下错误：

Unexpected aliasing of 'this' to local variable @typescript-eslint/no-this-alias

我使用const vm = this 的原因是因为一旦进入getActiveIndex 方法，this 的范围就会发生变化，我无法修改contentClass 数据属性。

我想知道是否有人能够提供更好/更合适的解决方案，而不是盲目地禁用 ESLint 规则以允许将 this 分配给常量？

非常感谢。

【问题讨论】：

您确定此范围已更改吗？您正在使用应该从外部范围绑定到 this 的箭头函数。我是古玩，因为我看不出它应该改变的原因。

是的，非常确定。将 vm.contentClass = 'bg-gradient-' + i 替换为 this.contentClass = 'bg-gradient-' + i 会导致错误（“此变量意外别名为局部变量”）。可能是因为slideChange 方法不是箭头函数；但我认为不可能？

@Dan 这听起来倒退了:) 使用this.contentClass 不会混淆this；而是 vm.conentClass（其中 vm = this）会导致 linter 错误。你有重现问题的 GitHub 存储库的链接吗？

【参考方案1】：

是的，有一个解决方案。您可以在 ESlint 配置文件中添加以下对象

  "@typescript-eslint/no-this-alias": [
    "error",
    
      "allowDestructuring": true, // Allow `const  props, state  = this`; false by default
      "allowedNames": ["vm"] // Allow `const vm= this`; `[]` by default
    
  ]

有关更多信息，请查看 TSLint：no-this-assignment

【讨论】：

配置文件的规则要加吗？

是的，会有一个名为eslintrc的文件

内部规则，它不适合我，但是当我将它放在模块导出之外时，它对我来说工作正常。

你把它放在外面

我也没有提到你需要把它放在rules

【参考方案2】：

也可以通过不使用data 并使用setup 方法全押来解决它

<script lang="ts">
import  IonPage, IonContent, IonSlides, IonSlide, from '@ionic/vue'

export default 
  name: 'Splash',
  components:  IonPage, IonContent, IonSlides, IonSlide,,
  setup() 
    const contentClass = ref<any>('bg-gradient-1');
    const slideChange = ( target ) => 
      target.getActiveIndex().then((i) => 
        contentClass.value = 'bg-gradient-' + i
      )
    ,
    const slideOpts = 
      autoplay: 
        delay: 4000,
      ,
        
    return  slideOpts, contentClass, slideChange 
  

</script>