[Vue 警告]：计算属性“axios”已在数据中定义。在 <应用程序>

Question

我知道 stackoverflow 中已经存在类似的问题，但我仍然不明白如何解决这个问题。我的控制台中有警告（查看标题）。

您可以通过以下代码重现警告

//index.js
import { createApp } from 'vue'
import { store } from './store'
import App from './App.vue'
import axios from 'axios';

const app = createApp(App)
app.__proto__.axios = axios
app.use(store)
app.mount("#app")

##App.vue

<template>
  <div class="TodoList">
    <p v-for="todo in todos" :key="todo.id">{{ todo.title }}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$store.dispatch("fillItems");
  },
  computed: {
    todos() {
      return this.$store.getters.todos;
    },
  },
};
</script>

<style>

</style>

##store.js

import { createStore } from 'vuex';

export const store = createStore({
    state: {
        todos: []
    },
    getters: {
        todos(state) {
            return state.todos
        }
    },
    mutations: {
        FILL_ITEMS(state, payload) {
            state.todos = payload
        }
    },
    actions: {
        fillItems({ commit }) {
            this.axios
                .get("https://jsonplaceholder.typicode.com/todos")
                .then(res => commit('FILL_ITEMS', res.data))
        }
    }
})

Answer 1

在 Vue 3 中，您可以使用提供/注入为组件创建应用全局变量：

提供

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

const app = createApp(App)
app.provide('axios', axios);  // Providing to all components here
app.use(store)
app.mount("#app")

注入

在选项 API 中：

export default {
  inject: ['axios'];   // injecting in a component that wants it
}

在合成 API 中：

const { inject } = Vue;
...
setup() {
  const axios = inject('axios');   // injecting in a component that wants it
}

编辑： 我回答得太快了（感谢@BoussadjraBrahim），你不是在问组件，但我也会留下这个答案。如果您只想在单独的模块中使用axios，您可以像任何导入一样使用它：

import axios from 'axios';

并使用axios 而不是this.axios

Answer 2

您可以将 axios 添加到 app.config.globalProperties 以便在任何子组件中访问它：

const app = createApp(App)
app.config.globalProperties.axios=axios

在子组件中使用this.axios

但您无法在 store 上下文中访问它，因为操作中的 this 指的是 store 实例，因此您应该在 store 文件中导入 axios 并像这样使用它：

import { createStore } from 'vuex';
import axios from 'axios';
export const store = createStore({
    state: {
        todos: []
    },
    getters: {
        todos(state) {
            return state.todos
        }
    },
    mutations: {
        FILL_ITEMS(state, payload) {
            state.todos = payload
        }
    },
    actions: {
        fillItems({ commit }) {
            axios
                .get("https://jsonplaceholder.typicode.com/todos")
                .then(res => commit('FILL_ITEMS', res.data))
        }
    }
})

或者您可以将 axios 分配给商店实例（不建议特别使用 typescript）：

const app = createApp(App)
store.axios = axios
app.use(store)
app.mount("#app")