Eslint state already declared [Vuex] Eslint state already declared [Vuex] vue.js vue.js

Eslint state already declared [Vuex]


The best solution is @Linus Borg's answer.

If you are looking for an alternative, you can declare the state constant below the rest. This will prevent variable shadowing because state will not be declared in the outer-scope yet.

Example:

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};


The best way to fix would be to read the docs about the eslint "no-shadow" rule.

From this documentation, the best solution would probably be to include an exception for this one variable with the "allow" option.

You can add this with a comment to the js file to keep the exeption local:

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


If it's not too late

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};

basically you define your store data as data, and you export it as state state: data