Vuex报错'state' is defined but never used no-unused-vars如何解决

报错根因 #

你定义的getter方法increment已经接收了state作为形参，但代码中使用this.state访问状态，没有用到传入的state变量，所以触发了no-unused-vars校验规则。同时你的代码还存在多处Vuex用法错误：

• 箭头函数没有自己的this指向，此处this.state无法指向Vuex的state实例，本身写法就不生效
• getters是Vuex的计算属性，仅用于派生、读取状态，不允许在getters中修改state，修改state的操作必须定义在mutations中
• 组件中直接访问this.$store.getters.increment仅会读取属性值，不会执行任何修改操作，修改状态需要调用commit触发对应mutation

修正后代码 #

Vuex store代码

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

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
    count: 0,
  },
  // 仅读取、派生状态的逻辑放在getters中
  getters: {
    doubleCount: (state) => state.count * 2
  },
  // 修改状态的逻辑放在mutations中
  mutations: {
    increment: (state) => state.count++
  }
});

组件代码

<template>
  <div>
    <!-- template中无需加this前缀，可直接访问$store -->
    {{ $store.state.count }}
    <button @click="increment">increment</button>
  </div>
</template>

<script>
export default {
  methods: {
    increment() {
      // 通过commit触发对应mutation完成状态修改
      this.$store.commit('increment');
    },
  },
};
</script>

内容的提问来源于stack exchange，提问作者nikoloz gabidzashvili