this.$axios.get和 this.axios.get的区别

this.$axios.get 是在Vue实例的上下文中使用axios实例的方式，可以直接在Vue组件的methods中使用，例如：

export default {
    methods: {
        async fetchData() {
            const response = await this.$axios.get('/api/data');
            console.log(response.data);
        }
    }
}

this.axios.get 则需要先导入axios库，然后再使用，例如：

import axios from 'axios';

export default {
    methods: {
        async fetchData() {
            const response = await axios.get('/api/data');
            console.log(response.data);
        }
    }
}

总结来说，this.$axios.get 是使用Vue插件的方式来使用axios，而 this.axios.get 则需要手动导入axios库。

相关问题

app.config.globalProperties.$axios

这是一个 Vue.js 中使用 Axios 的常见方法。在 Vue.js 中，可以通过 `app.config.globalProperties` 全局注册一个方法或属性。在这种情况下，我们可以将 Axios 实例作为全局属性注册，以便在整个应用程序中使用。

具体地说，`app.config.globalProperties.$axios` 表示将 Axios 实例作为 `$axios` 属性注册到 Vue.js 应用程序的全局属性中。这意味着我们可以在组件中使用 `$axios` 来发起网络请求。

示例代码如下：

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

const app = createApp(App)

app.config.globalProperties.$axios = axios

app.mount('#app')

在上面的示例中，我们首先导入了 `axios` 模块，并在 `createApp` 函数中将其作为全局属性注册。然后，我们将创建的 Vue.js 应用程序挂载到 `#app` DOM 元素上。

现在，我们可以在组件中使用 `$axios` 属性来发起网络请求了。例如：

export default {
  mounted () {
    this.$axios.get('/api/data')
      .then(response => {
        console.log(response.data)
      })
  }
}

在上面的示例中，我们在组件的 `mounted` 生命周期钩子中使用 `$axios` 属性发起了一个 GET 请求，并在控制台中打印响应数据。

Axios.prototype.$axios = axios在vue3中如何peizhi

在Vue 3中，我们可以使用provide和inject来实现类似Vue 2中的Vue.prototype.$http = axios的功能。具体实现方法如下：

1. 在Vue 3中，我们可以在main.js文件中创建一个axios实例，并将其作为provide的值：

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

const app = createApp(App)

app.provide('axios', axios.create({
  baseURL: 'http://localhost:3000/api'
}))

app.mount('#app')

2. 在组件中，我们可以使用inject来获取provide提供的axios实例：

<template>
  <div>
    <h1>Posts</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

<script>
import { inject } from 'vue'

export default {
  name: 'PostList',
  setup() {
    const axios = inject('axios')
    const posts = ref([])

    axios.get('/posts')
      .then(response => {
        posts.value = response.data
      })

    return {
      posts
    }
  }
}
</script>

在这个例子中，我们使用inject获取了provide提供的axios实例，并在组件的setup函数中使用它发送了一个GET请求，将响应结果赋值给了一个ref变量。需要注意的是，我们在provide和inject中使用的键名必须是字符串类型，而且需要保持一致。