Question

在我的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，但效果相同。

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

Answer 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一样使用。在这种情况下不是一个问题，但是当你有很多服务为你工作时很有帮助

访问Vuex模块操作中的vue-axios

1 个答案: