web-dev-qa-db-ja.com

エスリント州はすでに宣言している[Vuex]

ESLintを実行していますが、現在、次のESLintエラーが発生しています。

エラー「状態」はすでに上位スコープで宣言されています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
};

これを修正するための最良の方法は何でしょうか？

vue.jsvuejs2eslintvuex
10
Stephan-v

修正する最善の方法は、eslintの「影なし」ルールに関するドキュメントを読むことです。

このドキュメントから、最善の解決策は、「allow」オプションを使用してこの1つの変数の例外を含めることです。

これをコメント付きでjsファイルに追加して、例外をローカルに保つことができます。

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

最善の解決策は @ Linus Borgの答え です。

別の方法を探している場合は、残りの下に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
};
15
Ricky

手遅れでなければ

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としてエクスポートします。

7
allochi