Eslint 상태가 이미 선언된 [Vuex]

Eslint 상태가 이미 선언된 [Vuex]

ESLint를 실행하고 있는데 현재 다음 ESLint 오류가 발생하고 있습니다.

오류 '상태'가 이미 상위 범위 no-scope에 선언되었습니다.

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

이 문제를 해결하는 가장 좋은 방법은 무엇일까요?

가장 좋은 수정 방법은 eslint "no-shadow" 규칙에 대한 문서를 읽는 것입니다.

이 매뉴얼에서 가장 좋은 해결책은 "허용" 옵션과 함께 이 변수에 대한 예외를 포함하는 것입니다.

이를 js 파일에 코멘트와 함께 추가하여 설명을 로컬로 유지할 수 있습니다.

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

가장 좋은 해결책은 @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
};

너무 늦지 않았다면

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

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

@allochi의 답변에 따르면, Vue 4를 사용하는 Vue 3과 함께 동작하기 위해서는 다음과 같이 해야 했습니다.Vue 3에서는 함수의 상태를 되돌리는 것을 선호합니다.

// store.js

const data = {
  // ...
};

const getters = {
  // ...
};

const mutations = {
  // ...
};

const actions = {
  // ...
};

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

외부에서 특정 기능을 Import해야 할 경우 다음과 같이 수행해야 합니다.

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

언급URL : https://stackoverflow.com/questions/43843180/eslint-state-already-declared-vuex