Axios 핸들러 내에서 Vuex 저장소를 사용할 수 없습니다.

Axios 핸들러 내에서 Vuex 저장소를 사용할 수 없습니다.

Vue 컴포넌트의 버튼에 의해 정상적으로 호출된 메서드가 있습니다.

  methods: {
    goTestMe() {
      console.log(this.$store.state.lang+' 1')
      let url = 'some api url'
      let headers = { headers: { 'Content-Type': 'application/json' } }
      
      this.$axios
        .get(url, headers)
        .then(function(response) {
          console.log('here')
          console.log(this.$store.state.lang+' 2')
        })

문제는 이 출력은 다음과 같습니다.

en-us 1
here

필요한 경우:

en-us 1
here
en-us 2

분명히, 에 대한 참조는this.$store.state에 실패하다then()Axios 콜의 핸들러.

왜 이러한가?제 Axios 요청으로 받은 데이터를 Vuex 스토어로 보내려면 어떻게 해야 하나요?

일반 함수로 콜백을 추가하면 글로벌 객체에 액세스할 수 없으므로 화살표 함수로 변경해야 합니다.

 methods: {
    goTestMe() {
      console.log(this.$store.state.lang+' 1')
      let url = 'some api url'
      let headers = { headers: { 'Content-Type': 'application/json' } }
      
      this.$axios
        .get(url, headers)
        .then((response) => { // change it to arrow function
          console.log('here')
          console.log(this.$store.state.lang+' 2')
        })
}

언급URL : https://stackoverflow.com/questions/66508079/vuex-store-cannot-be-used-inside-axios-handler