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

您可以将state常量声明为低于其余值,这将阻止变量阴影,因为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 2

修复的最佳方法是阅读有关eslint“无阴影”规则的文档。

从本文档中，最好的解决方案可能是使用“ allow”选项为该变量添加一个例外。

您可以将其添加注释到js文件中，以保持exeption处于本地状态：

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

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，然后将其导出为statestate: data