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

这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战

全局绑定axios(在TypeScript中)

通过cnpm安装到项目中。

cnpm i axios --save

在main.ts中引入下面的接口和组件

import Axios,{AxiosInstance} from  'axios'

在main.ts中进行如下声明

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $axios: AxiosInstance
  }
}

在方法中可以直接通过this.$axios进行调用。

requestData() {
  this.$axios.get('https://s.itying.com/api/v1/login').then(res => {
    console.log(res);
  })
}

封装并全局绑定storage

封装storage

首先创建一个storage.ts文件
下面是storage.ts文件中的内容

export interface StorageInstance {
  set(key: string,value: any): void;
  get(key: string): any;
  remove(key: string): void;
}

class StorageClass implements StorageInstance {
  set(key: string, value: any): void {
    localStorage.setItem(key,JSON.stringify(value));
  }
  get(key: string): any {
    let temp = localStorage.getItem(key);
    if (temp) {
      return JSON.parse(temp);
    }
    return null;
  }
  remove(key: string): void {
    localStorage.removeItem(key);
  }
}
let Storge = new StorageClass();

export default Storage;

全局绑定storage

需要注意的是，我们全局绑定的是我们上一步暴露的storage。

引入已经封装好的storage。

import Storage,{StorageInstance} from './model/storage'

声明module

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $axios: AxiosInstance,
    $storage: StorageInstance
  }
}

挂载到全局

app.config.globalProperties.$storage = Storage

通过this.$storage即可访问

this.$storage.set("token",res.data.token)

封装接口地址

创建config.ts
在文件中暴露相关接口地址

export interface ConfigInstance {
  apiUrl: string;
  imgUrl: string;
}

class ConfigClass implements ConfigInstance {
  apiUrl: string;
  imgUrl: string;
  constructor() {
    this.apiUrl = 'https://s.itying.com/api/v1';
    this.imgUrl = 'https://s.itying.com'
  }
}

const Config = new ConfigClass();

export default Config;

在main.ts中进行声明与挂载

import Config,{ConfigInstance} from './model/config'
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $axios: AxiosInstance,
    $storage: StorageInstance,
    $config: ConfigInstance
  }
}
app.config.globalProperties.$config = Config

组件中获取只需通过this.$config.apiUrl即可。

总结

在vue中进行全局绑定是一个非常重要和常用的操作，以api请求地址为例，假如一个大型的vue项目每一个接口地址都是写死的，那么一旦api地址发生更改，这将给修改带来极大的困难，但是如果我们绑定到全局，修改起来就是十分简单的一件事情了，所以将一些常用属性和方法绑定到全局中是非常重要的。