Eslint state already declared [Vuex]

Question

I am running ESLint and I am currently running into the following ESLint error:

error 'state' is already declared in the upper scope 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
};

What would be the best way to fix this?

Jevons

Answer 1

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"] }]*/

Missymist

and for those that get the "no-param-reassign" error, this is the solution: /* eslint no-param-reassign: ["error", { "props": true, "ignorePropertyModificationsFor": ["state"] }] */ – Upkeep

and for those that get "getters is already declared in the upper scope...", use /* eslint no-shadow: ["error", { "allow": ["state", "getters"] }]*/ – Omar

Answer 2

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

Gulledge

Answer 3

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

Limbus

Answer 4

Had the same issue as I was using an airbnb eslint config which is incompatible with vuex.

This worked for me, after restarting dev environment.

I created a new .eslintrc.js file in my store folder and added them there

"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"
    ]
  }
],

Evildoer

Answer 5

Based on @allochi's answer, this is what I had to do to make it work With Vue 3 which uses Vuex 4 which prefers returning a function for state:

// store.js

const data = {
  // ...
};

const getters = {
  // ...
};

const mutations = {
  // ...
};

const actions = {
  // ...
};

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

If you need to import particular functions from outside, you will have to do it like this:

import mystore from './mystore';

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

I would only recommend this though if you really can't use /* eslint no-shadow: ["error", { "allow": ["state"] }]*/

Omar