Eslint 状态已经声明 [Vuex]

Question

我正在运行 ESLint，目前遇到以下 ESLint 错误：

错误 'state' 已在上层范围 no-shadow 中声明

const state = {
    date: '',
    show: false
};

const getters = {
    date: state => state.date,
    show: state => state.show
};

const mutations = {
    updateDate(state, payload) {
        state.date = payload.date;
    },
    showDatePicker(state) {
        state.show = true;
    }
};

export default {
    state,
    getters,
    mutations
};

解决此问题的最佳方法是什么？

Answer 1

最好的解决方法是阅读有关 eslint “no-shadow” 规则的文档。

根据本文档，最好的解决方案可能是使用“允许”选项为这个变量添加一个例外。

您可以在 js 文件中添加注释以保持 exeption 本地：

/* eslint no-shadow: ["error", { "allow": ["state"] }]*/

Answer 2

最好的解决方案是@Linus Borg's answer。

如果您正在寻找替代方案，您可以在其余部分下方声明state 常量。这将阻止variable shadowing，因为state 还不会在外部范围内声明。

例子：

const getters = {
    date: state => state.date,
    show: state => state.show
};

const mutations = {
    updateDate(state, payload) {
        state.date = payload.date;
    },
    showDatePicker(state) {
        state.show = true;
    }
};

const state = {
    date: '',
    show: false
};

export default {
    state,
    getters,
    mutations
};

Answer 3

如果还不算太晚

const data = {
    date: '',
    show: false
};

const getters = {
    date: state => state.date,
    show: state => state.show
};

const mutations = {
    updateDate(state, payload) {
        state.date = payload.date;
    },
    showDatePicker(state) {
        state.show = true;
    }
};

export default {
    state: data,
    getters,
    mutations
};

基本上您将商店数据定义为data，然后将其导出为状态state: data

Answer 4

遇到与我使用与 vuex 不兼容的 airbnb eslint 配置相同的问题。

重启开发环境后，这对我有用。

我在我的商店文件夹中创建了一个新的.eslintrc.js 文件并将它们添加到那里

"no-shadow": ["error", { "allow": ["state"] }],
"no-param-reassign": [
  "error",
  {
    "props": true,
    "ignorePropertyModificationsFor": [ // All properties except state are in the ignorePropertyModificationsFor array by default.
      "state",
      "acc",
      "e",
      "ctx",
      "req",
      "request",
      "res",
      "response",
      "$scope"
    ]
  }
],

Answer 5

根据@allochi 的回答，我必须这样做才能使其与使用 Vuex 4 的 Vue 3 一起工作，后者更喜欢返回状态函数：

// store.js

const data = {
  // ...
};

const getters = {
  // ...
};

const mutations = {
  // ...
};

const actions = {
  // ...
};

export default {
  state() { return data; },
  getters,
  mutations,
  actions
};

如果您需要从外部导入特定功能，则必须这样做：

import mystore from './mystore';

const Store = createStore({
  state: mystore.state,
  getters: mystore.getters,
  mutations: mystore.mutations,
  actions: mystore.actions
});

如果你真的不能使用/* eslint no-shadow: ["error", { "allow": ["state"] }]*/，我只会推荐这个