亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

[Vue warn]:計算屬性“axios”已在 Data 中定義。在 <應用程序>

[Vue warn]:計算屬性“axios”已在 Data 中定義。在 <應用程序>

蠱毒傳說 2023-09-21 16:44:51
我不明白如何解決這個問題。我的控制臺中出現警告(查看標題)。您可以通過以下代碼重現該警告//index.jsimport { createApp } from 'vue'import { store } from './store'import App from './App.vue'import axios from 'axios';const app = createApp(App)app.__proto__.axios = axiosapp.use(store)app.mount("#app")##應用程序視圖<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.jsimport { 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))? ? ? ? }? ? }})
查看完整描述

2 回答

?
達令說

TA貢獻1821條經驗 獲得超6個贊

您可以添加 axiosapp.config.globalProperties以便在任何子組件中訪問它:

const app = createApp(App)

app.config.globalProperties.axios=axios

在子組件中使用this.axios


但您無法在商店上下文中訪問它,因為this在操作中引用商店實例,因此您應該在商店文件中導入 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給商店實例(不建議特別使用打字稿):


const app = createApp(App)

store.axios = axios

app.use(store)

app.mount("#app")


查看完整回答
反對 回復 2023-09-21
?
慕仙森

TA貢獻1827條經驗 獲得超8個贊

在 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

}

我回答得太快了,你不是在問組件,但我也會留下這個答案。如果您只想axios在單獨的模塊中使用,則可以像任何導入一樣使用它:


import axios from 'axios';

并使用axios而不是this.axios


查看完整回答
反對 回復 2023-09-21
  • 2 回答
  • 0 關注
  • 138 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號