在Axios拦截器内调用Vuex突变器。

Question

我想从一个拦截器中触发一个突变。在这种情况下，触发 logout 每当Axios遇到http 403时，就会发生突变。

我导入了Vuex突变，并像我在其他地方做的那样进行了映射，但我一直无法在Axios拦截器错误函数中访问它。我已经在App.vue的create()方法中添加了我的拦截器配置。

我试过这2个问题的语法，但没有成功，很可能是由于我的项目使用了模块，而Axios配置是位于一个 created() 方法。

1. https:/www.reddit.comrvuejscommentseq5eejquestion_how_to_access_vuex_store_modules_mode_in <- Axios配置在一个单独的文件中。这是最佳实践吗？
2. 无法访问Axios拦截器内的Vuex存储突变。 <-不使用模块

App.vue

<script>
import { mapMutations } from "vuex";
import axios from 'axios';
export default {
  methods: {
    ...mapMutations(["logout"])
  },
  created(){
    axios.interceptors.response.use(
      function (response) {
        return response;
      }, 
      function (error) {
        if (error.response.status === 403) {
          this.logout()
            .then(() => {
              this.$router.push("/");
            })
        }
    });
  }
}
</script>

编辑添加以下答案的结果截图。

Answer 1

你已经很接近了。唯一阻止你的是，你在声明函数的时候使用了 "L"。function() {} 声明，而不是 "胖箭 "函数声明，后者是在创建一个新的作用域(this 是不同的）。) 你应该可以看到下面两个变化之间的差异。

// Your current script.
import { mapMutations } from "vuex";
import axios from 'axios';
export default {
  methods: {
    ...mapMutations(["logout"])
  },
  created(){
    axios.interceptors.response.use(
      function (response) {
        return response;
      }, 
      function (error) {
        if (error.response.status === 403) {
          this.logout()
            .then(() => {
              this.$router.push("/");
            })
        }
    });
  }
}


// Updated
import { mapMutations } from "vuex";
import axios from 'axios';
export default {
  methods: {
    ...mapMutations(["logout"])
  },
  mounted() {
    axios.interceptors.response.use(
      (response) => response, 
      (error) => {
        if (error.response.status === 403) {
          return this.logout()
            .then(() => this.$router.push("/"));
        }
        else {
          return Promise.reject(err);
        }
    });
  }
}
</script>

Answer 2

你将需要使用一个箭头函数或将此上下文绑定到你的函数中，以便访问 this 正确

<script>
import { mapMutations } from "vuex";
import axios from 'axios';
export default {
  methods: {
    ...mapMutations(["logout"])
  },
  created(){
    axios.interceptors.response.use(
      function (response) {
        return response;
      }, 
      (error) => {
        if (error.response.status === 403) {
          this.logout()
            .then(() => {
              this.$router.push("/");
            })
        }
      }
    );
  }
}
</script>

或

<script>
import { mapMutations } from "vuex";
import axios from 'axios';
export default {
  methods: {
    ...mapMutations(["logout"])
  },
  created(){
    axios.interceptors.response.use(
      function (response) {
        return response;
      }, 
      function (error) {
        if (error.response.status === 403) {
          this.logout()
            .then(() => {
              this.$router.push("/");
            })
        }
      }.bind(this)
    );
  }
}
</script>