Vuex Action Handler Context Object and Payload ESLint rules problem

0
votes

I'm having a problem regarding the vuex action handler and ESLint rules

this action code will flag ESLint as error if the variables are not used and if the object is empty

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

commit and state will throw error as unused vars

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

this {} will throw empty object

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

the payload will return context object

here is my eslint config

"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"
    }

I managed to avoid the ESLint errors by using the rules "no-unused-vars": "warn", "no-extra-boolean-cast": "warn"

Here is the catch:

  1. I don't want to bypass ESLint. Of course, it will throw errors. There are times that i don't need to use the context, only the payload variable.
  2. Can somebody explain to me the action handler's parameters behavior and how to make it follow ESLint rules "eslint:recommended"
2
vue.jsvuexeslint

2 Answers

2
votes

I've had this issue too. I resolved it by replacing { commit, state } with a simple underscore (_), like so:

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

This is — to my understanding — a "meta-convention" used by human beings, i.e. when a developer wants to signal to other developers that "this argument is unused" (it's frequently used in Kotlin, for example). I was quite surprised to see that my linter skipped the warnings for this notation and that my unit tests passed too.

With that being said, I think we need a bit more discussion on why this is so and whether it's a doumented feature of the language or just plain luck, or, even worse: a nasty lint konfiguration in my project.

1
votes

I've run into this problem also, this link might be helpful. https://forum.kirupa.com/t/js-tip-of-the-day-the-underscore-convention/643076

I ended up doing this to stop the linter from complaining:

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