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中使用的键名必须是字符串类型，而且需要保持一致。