在 Vuex 模块操作中访问 vue-axios答案

【问题标题】：Accessing vue-axios inside Vuex module actions在 Vuex 模块操作中访问 vue-axios
【发布时间】：2018-04-25 01:55:49
【问题描述】：

在我的 Vuex 设置中，商店目前的结构如下：

store
 - modules
   - common_data
     - index.js
     - mutations.js 
     - actions.js 
     - getters.js

现在，actions.js 中的一项操作定义为：

populateTimeZones(context) {
    var baseUrl = context.getters.getApiBaseUrl;

    this.$http.get(baseUrl + '/time-zones')
    .then(function (res){
        if(res.status == 'ok'){
            this.$store.commit('SET_TIME_ZONES', res.info.timeZones);
        } else {
            alert('An error occurred. Please try again!');
            return;
        }
    }.bind(this));
}

我认为 Vue 实例在此处不可用，这导致操作失败并出现错误：Cannot read property 'get' of undefined。我尝试过其他组合，例如 this.axios 和 vue.axios，但结果是一样的。

我做错了吗？处理此类情况的常见模式是什么？

【问题讨论】：

你试过import Vue from 'vue'然后Vue.$http。未发布为认为的答案，您需要在$http 可用之前创建一个视图实例，但我无法测试。
在旁注中，我已经开始使用名为vue-inject 的东西，它是 Vue 的 DI 容器。它允许您将axios 注册为服务，然后在需要时只需调用VueInjector.get('axios')。在 Vue 组件本身上，您可以使用dependencies: ['axios']，然后像this.axios 一样使用。在这种情况下不是什么大问题，但当您有很多服务为您工作时会很有帮助。
@webnoob 我不想创建新实例，因为现有实例上可能有一些我需要访问的配置（例如，axios 拦截器）。我想我会在加载根组件时尝试传入 Vue 实例。
这将是我的第二个建议。
@webnoob 哇，喷油器听起来不错。将在未来的项目中尝试它，但现在事情有点着火了。 :D

标签： vue.js vuex

【解决方案1】：

如果不通过 Vue 实例或创建一个新实例，您将无法访问它。

做你想做的事的一个简单方法是将你的this 传递给你的操作this.$store.dispatch('populateTimeZones', this)，然后将你的方法签名更改为populateTimeZones({ context }, vueInstance)。这将允许您访问vueInstance.$http。

另一个想法是 vue-inject，它是 Vue 的 DI 容器。它允许您将 axios 注册为服务，然后在需要时简单地调用 VueInjector.get('axios') 。在 Vue 组件本身上，你可以做依赖：['axios'] 然后像 this.axios 一样使用。在这种情况下不是什么大问题，但当您有很多服务为您工作时会很有帮助

【讨论】：

谢谢。我能够弄清楚这一点，但希望它会帮助别人。 :)
@dotslash 祝你好运 ;)
嗨，伙计们，我遇到了同样的问题，最终让我来到这里，但我正在尝试从模块编辑 axios 标头以放置用户令牌，这不会影响我的主要 axios 标头，当我返回未定义时从标头调用令牌