mirrors-vue-axios: Небольшая оболочка для интеграции axios в Vuejs.

Vue-axios

Небольшая оболочка для интеграции axios в Vuejs.

Зачем? Я создал эту библиотеку, потому что в прошлом мне требовалось простое решение для перехода с vue-resource на axios. Она связывает axios только с экземпляром vue, поэтому вам не нужно импортировать его каждый раз при использовании axios.

Как установить:

ES6 Module:

npm install --save axios vue-axios

Импортируйте библиотеки в файл входа:

// import Vue from 'vue'   // в Vue 2
import * as Vue from 'vue' // в Vue 3
import axios from 'axios'
import VueAxios from 'vue-axios'

Использование в Vue 2:

Vue.use(VueAxios, axios)

Использование в Vue 3:

const app = Vue.createApp(...)
app.use(VueAxios, axios)

Script: просто добавьте 3 скрипта в свой документ в следующем порядке: vue, axios и vue-axios.

Использование:

В Vue 2 эта оболочка связывает axios с Vue или this, если вы используете однофайловый компонент. Вы можете использовать axios следующим образом:

Vue.axios.get(api).then((response) => {
  console.log(response.data)
})

this.axios.get(api).then((response) => {
  console.log(response.data)
})

this.$http.get(api).then((response) => {
  console.log(response.data)
})

В Vue 3 эта оболочка связывает axios с экземпляром приложения или this, если вы используете однофайловый компонент. В API опций вы можете использовать axios следующим образом:

// App.vue
export default {
  name: 'App',
  methods: {
    getList() {
      this.axios.get(api).then((response) => {
        console.log(response.data)
      })
      // или
      this.$http.get(api).then((response) => {
        console.log(response.data)
      })
    }
  }
}

Однако в Composition API setup мы не можем использовать this, вы должны использовать provide API для совместного использования свойств глобального экземпляра, а затем использовать inject API для внедрения axios в setup:

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import axios from 'axios'
import VueAxios from 'vue-axios'

const app = createApp(App).use(store)
app.use(VueAxios, axios)
app.provide('axios', app.config.globalProperties.axios)  // provide 'axios'
app.mount('#app')

// App.vue
import { inject } from 'vue'

export default {
  name: 'Comp',
  setup() {
    const axios: any = inject('axios')  // inject axios

    const getList = (): void => {
      axios
        .get(api)
        .then((response: { data: any }) => {
          console.log(response.data)
        });
    };

    return { getList }
  }
}

Пожалуйста, ознакомьтесь с полной документацией axios (https://github.com/axios/axios).

Поддержка нескольких экземпляров axios: Библиотека позволяет иметь разные версии axios одновременно, а также изменять имена регистрации по умолчанию (например, axios и $http). Чтобы использовать эту функцию, вам необходимо предоставить параметры в виде объекта, где:

<key> — имя регистрации;
<value> — экземпляр axios. Для Vue это выглядит так:

// Vue 2 / Vue 3 + Composition API
import App from './App.vue'
import VueAxios from 'vue-axios'
import axios from 'axios'
import axios2 from 'axios'
Vue.use(VueAxios, { $myHttp: axios, axios2: axios2 }) // или app.use() для Vue 3 Optiona API

// использование
export default {
  methods: {
    getList(){
      this.$myHttp.get(api).then((response) => {
        console.log(response.data)
      })
      this.axios2.get(api).then((response) => {
        console.log(response.data)
      })
    }
  }
}

В Options API Vue 3 это работает аналогично, но если вы хотите использовать Composition API, вам следует настроить код. ``` // Vue 2 + Setup функция импорт { createApp } из 'vue' импорт App из './App.vue' импорт store из './store' импорт axios из 'axios' импорт VueAxios из 'vue-axios'

константа app = createApp(App).use(store) app.use(VueAxios, { $myHttp: axios, axios2: axios2 }) app.provide('$myHttp', app.config.globalProperties.$myHttp) // предоставить '$myHttp' app.provide('axios2', app.config.globalProperties.axios2) // предоставить 'axios2' app.mount('#app')

// App.vue импорт { inject } из 'vue'

экспорт по умолчанию { имя: 'Comp', setup() { const $myHttp: any = inject('$myHttp') // внедрить $myHttp

функция getListWithMyHttp(): void {
  $myHttp
    .get(api)
    .then((response: { data: any }) => {
      console.log(response.data)
    });
};

const axios2: any = inject('axios2')  // внедрить axios2
функция getListWithAxios2(): void {
  axios2
    .get(api)
    .then((response: { data: any }) => {
      console.log(response.data)
    });
};


вернуть { getListWithMyHttp, getListWithAxios2 }

} }

OSCHINA-MIRROR/mirrors-vue-axios

Комментарии ( 0 )

Введение

Обновления

Участники

Недавние действия