0

Hi I have an error in Vuex

11:17 error 'state' is defined but never used no-unused-vars

I can't find anything about this and here is the code

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
    count: 0,
  },
  getters: {
    increment: (state) => this.state.count++,
  },
});

<template>
  <div>
    {{ this.$store.state.count }}
    <button @click="increment">increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {

    };
  },
  methods: {
    increment() {
      this.$store.getters.increment;
    },
  },
};
</script>
nikoloz gabidzashvili
  • 11
  • 2
  • 1
    The `state` is passed as an argument but never used inside `increment` getter body. Either use `increment: (state) => state.count++` or `increment: () => this.state.count++` – Michal Levý Aug 24 '21 at 17:53
  • `increment: () => this.state.count++` will rise an error as `this` is undefined in vuex getters. the error in question is a linting error, and can be safely turned off in `.eslintrc`: https://stackoverflow.com/questions/61874994/vue-disable-no-unused-vars-error-the-simplest-fix – Igor Moraru Aug 24 '21 at 18:06
  • @IgorMoraru It's not preferable to turn it off as it often indicates problems in the code like this one. The use of `state` suggest that it should be `(state) => state.count++` but instead it's accessed on `this` without a good reason and in a wrong way. This linter error also commonly occurs when there's a problem with scopes. – Estus Flask Aug 24 '21 at 18:10

1 Answers1

1

Instead of doing this.state.count++, do state.count += 1 as state is being passed as an argument to getter. Although I am not sure why state is being mutated by a getter. (use mutations).

Abbas
  • 1,118
  • 1
  • 11
  • 25
  • @NardisAbbas now i have another error 6:1 error Prefer default export import/prefer-default-export 11:27 error Unary operator '++' used no-plusplus – nikoloz gabidzashvili Aug 24 '21 at 18:16
  • instead of `state.count++`, please do `state.count += 1`. This is just an `eslint` rule Because the unary ++ and -- operators are subject to automatic semicolon insertion, differences in whitespace can change semantics of source code. – Abbas Aug 24 '21 at 18:17