时间戳

首页 > 解决方案 > Vuex Action Handler Context Object 和 Payload ESLint 规则问题

vue.js - Vuex Action Handler Context Object 和 Payload ESLint 规则问题

问题描述

我对 vuex 操作处理程序和 ESLint 规则有疑问

如果未使用变量且对象为空，则此操作代码会将 ESLint 标记为错误

actions:{
  handler:({commit, state}, payload) =>{}
}

提交和状态将作为未使用的变量抛出错误

actions:{
  handler:({}, payload) =>{}
}

这个 {} 将抛出空对象

actions:{
  handler:(payload) =>{}
}

有效载荷将返回上下文对象

这是我的 eslint 配置

"eslintConfig": {
    "root": true,
    "env": {
        "node": true
    },
    "extends": [
        "plugin:vue/essential",
        "eslint:recommended",
        "@vue/prettier"
    ],
    "parserOptions": {
        "parser": "babel-eslint"
    },
    "rules": {
        "no-unused-vars": "warn",
        "no-extra-boolean-cast": "warn"
    }

我通过使用规则 "no-unused-vars": "warn", "no-extra-boolean-cast": "warn" 设法避免了 ESLint 错误

这是问题所在：

  1. 我不想绕过 ESLint。当然，它会抛出错误。有时我不需要使用上下文，只需要使用有效负载变量。
  2. 有人可以向我解释操作处理程序的参数行为以及如何使其遵循 ESLint 规则“eslint:recommended”

标签： vue.jsvuexeslint

解决方案

我也遇到过这个问题。我通过用{ commit, state }一个简单的下划线 ( _) 替换来解决它，如下所示：

actions:{
  handler:(_, payload) => {
    // do something
  }
}

据我了解，这是人类使用的“元约定”，即当开发人员想要向其他开发人员发出“此参数未使用”的信号时（例如，它在 Kotlin 中经常使用）。我很惊讶地看到我的 linter 跳过了这个符号的警告，而且我的单元测试也通过了。

话虽如此，我认为我们需要更多地讨论为什么会这样，以及它是否是该语言的一个已证实的特性，或者仅仅是运气，或者更糟糕的是：我的项目中的一个讨厌的 lint 配置。

推荐阅读