记录在vue3上注入axios依赖

在写的过程中出现了一些问题，所以记录一下步骤

首先下载axios

npm install axios

方式一：局部设置axios

axios下载完毕后在main.ts里面导入依赖

在要用的组件下面写入如下代码，我这里是自建的Movie.vue，注意：axios.get('http://localhost:8088/user/findAll')这个里面的网址改成自己想要连接的网址

<template>
  <div>
    <button @click="increment()"></button>
  </div>
  
</template>

<script lang="ts">
  import axios from 'axios'
  import { inject,ref,onBeforeMount,onMounted,getCurrentInstance } from 'vue'

  export default {
    setup() {
      function increment() {     
       axios.get('http://localhost:8088/user/findAll')
    .then(response => console.log(response.data))
    .catch(error => console.error(error));

      }

     

      // 不要忘记同时暴露 increment 函数
      return {
        count,
        sm,
        increment
      }
    }
  }
</script>
<style></style>

然后保存并运行

network里面可以找到网络传输协议

方式二：全局设置axios

与方式一的区别在于，组件连接地址时只用写端口后的路径如，“http://localhost:8088/user/findAll”中的“/user/findAll”，这样后端更改端口的时候不用在前端里面一个一个去改路径

mian.ts中

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import axios from 'axios'


const app = createApp(App)
//配置请求根路径
axios.defaults.baseURL='http://localhost:8088'
将axios作为全局的自定义属性,每个组件可以在内部直接访问
app.config.globalProperties.$http = axios
// console.log('Global $http configured:', app.config.globalProperties.$http);
//配置elementplus
app.use(ElementPlus)
app.mount('#app')

在shims-vue.d.ts里面写入

import axios from 'axios';

declare module 'vue' {
  interface ComponentCustomProperties {
    $http: typeof axios;
    $translate: (key: string) => string; // 如果你也需要支持国际化等其他全局属性
  }
}

在tsconfig.json里面查看includ是否有shims-vue.d.ts的路径,一般shims-vue.d.ts的路径位于src根目录下，所以路径写为"src/**/*.d.ts"

自己创建的组件Movie.vue中写入代码，注意： $http.get('/user/findAll')，'/user/findAll'改为自己需要连接的相对地址

<template>
  <div>
    <h1 v-for="names in sm" :key="names.id">{{ names.name }}</h1>
    <el-button @click="increment()"></el-button>
  </div>
  
</template>

<script lang="ts">
  import { inject,ref,onBeforeMount,onMounted,getCurrentInstance } from 'vue'

  export default {
    setup() {
    
      // 注入 $http 服务,用函数来钩当前实例
      const currentInstance = getCurrentInstance()
      const $http = currentInstance?.appContext.config.globalProperties.$http
      // console.log('$http:', $http)

      function increment() {
        // 在 JavaScript 中需要 .value
        count.value++
      }

      //在组件挂载完成后调用
      onMounted(() => {
      if ($http) {
        $http.get('/user/findAll')
          .then(response => console.log(response.data))
          .catch(error => console.error(error));
      } else {
        console.error('$http is not available');
      }
    })

      // 不要忘记同时暴露 increment 函数
      return {
        count,
        sm,
        increment
      }
    }
  }
</script>
<style></style>

不用点击按钮就可以打印数据