store/index.js의 내보내기 외부 상태에 액세스하는 방법

store/index.js의 내보내기 외부 상태에 액세스하는 방법

저는 Axios를 스토어 액션으로 사용하고 있으며, 어떤 상태에 따라 Axios 헤더를 설정하고 싶습니다(승인된 언어에 대한 요청 헤더를 변경).내보내기 외부에 있는 저장소에 액세스하려고 하면 "cannot find property state of defined" 오류가 나타납니다.나의store/index.js파일:

import Vue from "vue";
import Vuex, { Store } from "vuex";
import Axios from "axios";
Vue.use(Vuex);

Axios.defaults.headers['Accept-Language'] = store.state.Lang

const store = new Vuex.Store({
  state: {
    Lang: "en",
    ApiConf: [],
    Token: null,
    Session: null,
  }
...
}
export default store

스토어가 정의된 동일한 파일에서 스토어와 주에 어떻게 액세스하시겠습니까?아니면 이 상태 의존적인 Axios 헤더를 스토어에 접속하여 모든 액션을 정의하지 않고 구현하려면 어떻게 해야 할까요?

store는, 액세스시에 정의되어 있지 않습니다.Vuex 스토어는 일반적으로 개별 모듈에서 정의되므로 이미 Import된 모듈에서 사용할 수 있으며 레이스 조건이 발생하지 않습니다.

또 다른 문제는 다음과 같은 경우 반응성을 유지할 수 없다는 것입니다.Axios.defaults.headers스토어 값과 함께 한 번 할당됩니다.Accept-Language요청 헤더에 지정되지 않는 한 항상 초기값이 됩니다.

대신 Axios 인터셉터에서 수행해야 합니다.

Axios.interceptors.request.use(config => {
  config.headers['Accept-Language'] = store.state.Lang;
  return config;
});

코드의 문제점은 이 코드에 접속하는 것입니다.store변수를 선언하기 전에 에러입니다.

선을 이동합니다.

Axios.defaults.headers['Accept-Language'] = store.state.Lang

export 스테이트먼트 위:

import Vue from "vue";
import Vuex, { Store } from "vuex";
import Axios from "axios";
Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    Lang: "en",
    ApiConf: [],
    Token: null,
    Session: null,
  }
...
}
Axios.defaults.headers['Accept-Language'] = store.state.Lang

export default store

언급URL : https://stackoverflow.com/questions/68306657/how-to-access-state-outside-export-in-store-index-js