TypeScript中Vue的全局绑定axios、storage、接口地址的方法

2023-10-09 18:12:48

安装必要的库

首先，我们需要安装必要的库。

npm install --save vue vue-router @types/vue @types/vue-router axios

2. 创建Vue实例

接下来，我们需要创建一个Vue实例。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    }
  ]
})

const app = new Vue({
  router
}).$mount('#app')

3. 全局绑定axios

在main.ts文件中，我们可以全局绑定axios。

import Vue from 'vue'
import Axios from 'axios'

Vue.prototype.$axios = Axios

4. 全局绑定storage

在main.ts文件中，我们可以全局绑定storage。

import Vue from 'vue'
import Storage from 'local-storage'

Vue.prototype.$storage = Storage

5. 全局绑定接口地址

在main.ts文件中，我们可以全局绑定接口地址。

import Vue from 'vue'

Vue.prototype.$apiUrl = 'https://api.example.com'

6. 使用全局绑定的数据

现在，我们可以在任何组件中使用全局绑定的数据。

<template>
  <div>
    <button @click="getData()">Get Data</button>
    <div v-if="data">
      {{ data }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null
    }
  },
  methods: {
    getData() {
      this.$axios.get(`${this.$apiUrl}/data`).then((response) => {
        this.data = response.data
      })
    }
  }
}
</script>