Vuex store 不能在 axios handler 中使用

Question

我的 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 的引用在 axios 调用的 then() 处理程序中失败。

这是为什么？如何将我的 axios 请求收到的数据发送到 Vuex 商店？

Answer 1

在普通函数中添加回调时，无法访问全局对象，因此需要将其更改为箭头函数

 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')
        })
}

Vuex store 不能在 axios handler 中使用

Vuex store cannot be used inside axios handler

vue.js

axios

vuex

console.log