Vuex 4 模块不能使用全局 axios 属性

Question

我有一个 Vue3（没有 Typescript）应用程序运行 Vuex 4.0.0.

我正在尝试使用 axios 在我的一个商店模块中设置一个简单的 GET 请求，但是当我尝试通过我的一个组件，但是如果我从组件调用 this.$axios 它工作正常。出于某种原因，我的模块无法使用 this.$axios，而我可以在应用程序的其他地方使用。

我在 main.js 文件中将 $axios 声明为 globalProperty。

// main.js

import { createApp } from "vue";
import App from "./App.vue";
import { router } from "./router";
import { store } from "./store";
import axios from "axios";

const app = createApp(App).use(store).use(router);
app.config.globalProperties.$axios = axios;

app.mount("#app");

商店模块看起来像这样（为了这个问题的目的而简化）：

// store/modules/example.js

const state = () => ({
  message: ""
});

const mutations = {
  getMessage(state, payload) {
    state.message = payload;
  }
};

const actions = {
  async setMessage(commit) {
    this.$axios.get("example.com/endpoint").then(response => {
      commit("setMessage", response.message);
    });
  }
};

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
};

上面 main.js 中导入的主要 store/index.js 如下所示：

// store/index.js

import "es6-promise";
import { createStore } from "vuex";

import example from "./modules/example";

export const store = createStore({ modules: { example } });

在组件中，我有以下内容：

// MyComponent.vue

import { mapGetters, mapActions } from "vuex";

export default {
  computed: {
    ...mapGetters({
      message: "example/getMessage"
    })
  },
  methods: {
    ...mapActions({
      getMessage: "example/setMessage"
    })
  }
};

还有一个带有 @click="getMessage" 的简单按钮。但是，单击此按钮 returns Uncaught (in promise) TypeError: Cannot read property 'get' of undefined，但是如果我 copy/paste 将 setMessage 操作放入组件方法中，它就可以正常工作。

有没有办法让我将 this.$axios 公开给商店文件？

Answer 1

虽然这不是理想的解决方案，因为我更希望通过挂载文件中的单个声明让我的 $axios 实例在全球范围内可用，但它可能是下一个最好的选择。

我制作了一个 lib/axiosConfig.js 文件，该文件导出一个带有一些自定义 axios 选项的 axios 实例，我只在每个需要它的模块中导入那个实例。

import axios from "axios";

axios.defaults.baseURL= import.meta.env.DEV ? "http://localhost:8000": "example.com";
axios.defaults.headers.common["Authorization"] = "Bearer " + localStorage.getItem("token");
axios.defaults.headers.common["Content-Type"] = "application/json";
// etc...

export const $axios = axios.create();

在我需要 $axios 的任何模块中，我只是 import { $axios } from "./lib/axiosConfig。它并不像我提到的那样完美，因为我仍然必须在每个模块中导入它，但就我所见，它已经足够接近了，并且具有通过导入此文件在任何地方使用相同的 axios 配置的额外好处。

Vuex 4 模块不能使用全局 axios 属性

Vuex 4 Modules can't use global axios property

vue.js

axios

vuex

vuejs3

vuex-modules