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

Posted 2023-03-13

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

【英文标题】：[Vue warn]: Computed property "axios" is already defined in Data. at <App>

【发布时间】：2021-03-13 08:55:13

【问题描述】：

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

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

//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))
        
    
)

【参考方案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

【讨论】：

好建议；但他无法访问 store 实例中的this.axios

@BoussadjraBrahim - 你说得对，我什至没有注意足够长的时间来注意到他没有询问组件

您可以编辑此example 并看到this 指的是商店实例而不是应用程序

@BoussadjraBrahim 不，很明显。我只是没有将他的问题滚动到足以看到他在询问 Vuex 而不是组件。

@BoussadjraBrahim 不仅糟糕，那将是一种糟糕的做法 :)

【参考方案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")

【讨论】：

谢谢...因为我想展示一个小例子，所以我将 store.js 做成了一个文件，但是有多个模块文件，使用 axios，在每个文件中编写 axios 是不可行的。有解决办法吗？我的解决方案正在运行，但这个警告让我烦恼

您可以将axios 添加到store.axios=axios;app.use(store) 之类的存储中，然后将其与this.axios 一起使用

谢谢..您可以使用上述评论更新您的答案。我会标记你的答案。它正在按我的预期工作。