Add Vuex support to vue/no-unused-properties

[fuale]

Changes are aimed at improving Vuex support.

Following Vuex methods will be checked: mapGetters, mapState, mapActions, mapMutations, when no-unused-properties will be enabled

example:

<script>
  export default {
    computed: {
      ...mapGetters(["bar"]),
    },
    methods: {
      baz() {
        return this.bar // no error
      }
    }
  }
</script>
<template>
  {{ baz() }}
</template>

Changes will affect #1675 (Vuex and Pinia support)

[fuale]

The issue was created on October 22, 2021, but I am unable to find a way to check Vuex map methods today. To refactor my personal project, I am adding checks now. Maybe it would be useful to you

[FloEdelmann]

Sorry for the late review. Thanks for your pull request! I have some comments, see below.

[FloEdelmann]

Some suggestions. Please try them out locally and see if there are any type errors now.

[fuale]

Some suggestions. Please try them out locally and see if there are any type errors now.

Done. No type errors.

[FloEdelmann]

Looks good to me 🙂

[CyanSalt]

It is worth mentioning that Pinia also provides mapWritableState, which may also produce properties.

For reference, eslint-plugin-galaxy created by me once implemented similar functionality (although it may have issues).

[ota-meshi]

LGTM! Thank you! Sorry for the late review.

[eigan]

@fuale Thanks for this! Would it be easy to also add support for Pinia mapStores? https://pinia.vuejs.org/api/modules/pinia.html#mapStores 👼🏻

[FloEdelmann]

I'm afraid that's not possible, since the name of the resulting properties can't be easily deduced.

[eigan]

@FloEdelmann allright, thanks!

[luizotcarvalho]

I really appreciate this feature, thanks @fuale ! While using I found a edge case, Im using Nuxt 2 and mapping a Pinia action to my page but this action is called with a vm inside the beforeRouteEnter like this:

methods: {
  ...mapActions(useStatementStore, {
    resetStatement: '$reset'
  }),
},
...
beforeRouteEnter (to, from, next) {
  next(vm => vm.resetStatement())
}

I keep receiving the error 'resetStatement' of method found, but never used and don't know how to proceed, you think will be needed to ignore cases like this or the support can be broaden a little?

[FloEdelmann]

@luizotcarvalho please create a new issue following the bug template, so this can be addressed properly.

[Ceall8650]

I've upgraded the eslint-plugin-vue plugin to the version: 9.24.0
but the unused mapState still doesn't get the error.
Should I need to upgrade other plugins or some necessary plugins that I need to install?

Here is my package.json

// package.json
...
"vue": "^2.6.11",
"vue-eslint-parser": "^9.4.2",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^9.24.0",

// .eslintrc.js
module.exports = {
  ...
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: '@babel/eslint-parser',
  },
  env: {
    browser: true,
  },
  extends: [
    'plugin:vue/recommended',
    'airbnb-base'
  ],
  plugins: [
    'vue',
    'import',
    'import-helpers'
  ],
  rules: {
    ...,
    "vue/no-unused-properties": ["error", {
      "groups": [
        'props',
        'computed',
        'data',
        'methods',
      ],
      "deepData": true,
    }]
}

[FloEdelmann]

Please open a new issue with your exact setup and sample code. But before that, please try upgrading your ESLint version, you're a major version behind there.

[Ceall8650]

OK, Thanks