Vuex报import/prefer-default-export错误不想改默认导出求助

该报错由ESLint的import/prefer-default-export规则触发，这条规则的默认逻辑是：当单个模块仅导出一个内容时，强制要求使用默认导出而非命名导出。

你可以通过两种方式关闭规则校验：

• 方案1：仅针对当前文件行禁用规则
  在store.js的导出语句上方添加单行注释即可，不影响全局ESLint配置：

// eslint-disable-next-line import/prefer-default-export
export const store = new Vuex.Store({
  // 原有配置保持不变
})

• 方案2：全局关闭该规则
  找到项目根目录的ESLint配置文件（常见命名为.eslintrc.js、.eslintrc.json），在rules字段中添加如下配置：

rules: {
  // 原有其他规则保留
  "import/prefer-default-export": "off"
}

修改后重启编辑器的ESLint服务即可生效，适合项目整体约定使用命名导出的场景。

你当前的Vuex代码存在功能错误，会导致计数功能无法正常运行：

1. 不能在getters中修改state，getters仅用于计算返回派生状态，同步修改state的逻辑需要写在mutations中，调整store.js配置：

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

2. 组件中触发state修改需要调用$store.commit方法，调整组件的methods逻辑：

methods: {
  increment() {
    this.$store.commit('increment')
  }
}

3. 模板中不需要加this前缀，可以直接写{{ $store.state.count }}，写法更规范简洁。

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