如何解决在Ionic Vue方法中定义嵌套作用域内的`this`的ESLint错误

Question

我有一个 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>

出现如下错误：

意外地将“this”别名为本地变量@ typescript-eslint / no-this-alias

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

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

非常感谢。

- Dan

---

你确定这个作用域已经改变了吗？你正在使用箭头函数，它应该绑定到外部作用域的this。我很好奇，因为我看不出它为什么会改变。 - farincz

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

@Dan 听起来有些颠倒了 :) 使用 this.contentClass 不会给 this 起别名；相反，是 vm.conentClass（其中 vm = this）会导致 linter 错误。你有一个能重现这个问题的 GitHub 仓库链接吗？ - tony19

Answer 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

- Amaarockz

---

我们需要在配置文件的规则上添加吗？ - Script Host

是的，将会有一个名为 eslintrc 的文件。 - Amaarockz

在规则内部，它对我来说不起作用，但当我将其放在模块导出之外时，它对我来说运行良好。 - Script Host

把它放在自己的外面。 - Amaarockz

我也没有提到你需要将其放置在“rules”内。 - Amaarockz

这不是一个解决方案。如果你在一个环境中工作，对于代码检查配置你没有任何控制权，那么这并不是你能做的事情。 - Nisanio

Answer 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>

- Aaron Saunders

Answer 3

在.rules键中的.eslintrc文件上添加"@typescript-eslint/no-this-alias": 0，例如在我的情况下：

"rules": {
        "@typescript-eslint/no-var-requires": 0,
        "@typescript-eslint/no-explicit-any": 0,
        "@typescript-eslint/no-this-alias": 0,
        "no-console": 1, // Means warning
        "prettier/prettier": 2 // Means error
    }

- pedro.caicedo.dev