Vuex Action Handler Context Object 和 Payload ESLint 规则问题答案

【问题标题】：Vuex Action Handler Context Object and Payload ESLint rules problemVuex Action Handler Context Object 和 Payload ESLint 规则问题
【发布时间】：2020-09-18 00:12:23
【问题描述】：

我遇到了关于 vuex 操作处理程序和 ESLint 规则的问题

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

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

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

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

此 {} 将抛出空对象

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

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 错误

这里是关键：

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

【问题讨论】：

标签： vue.js vuex eslint

【解决方案1】：

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

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

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

话虽如此，我认为我们需要更多地讨论为什么会这样，以及这是语言的一个确定的特性还是只是运气好，或者更糟糕的是：我的项目中的一个讨厌的 lint 配置。

【讨论】：

【解决方案2】：

我也遇到过这个问题，这个链接可能会有所帮助。 https://forum.kirupa.com/t/js-tip-of-the-day-the-underscore-convention/643076

我最终这样做是为了阻止 linter 抱怨：

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

【讨论】：