vue 전역적으로axios 작업 사용하기

vue 프로젝트 개발에서 우리는 axios를 사용하여 aax 요청을 한다. 많은 사람들이 처음에 axios 방식을 사용하기 시작하면 vue-resoure의 사용 방식으로 사용한다. 즉, 메인 입구 파일에import Vue Resource from'vue-resource'를 도입한 후에 바로 Vue를 사용한다.use(Vue Resource)를 사용하면 이 플러그인을 전체적으로 인용할 수 있기 때문에axios를 이렇게 사용할 때 잘못 보고해서 당황스럽습니다.
문서를 자세히 보면 axios는promise 기반의 HTTP 라이브러리이고 axios는 설치 방법이 없기 때문에 vue를 사용할 수 없습니다.use () 메서드의☞ 보기vue 플러그인
그럼 모든 파일에서axios를 한 번씩 인용해야 하나요?얼마나 번거로운가!!!해결 방법은 다음과 같습니다.
1. vue-axios와 결합하여 사용
2. axios Vue의 원형 속성으로 바꾸기
3. Vuex를 결합한 액션
1. vue-axios와 결합하여 사용
vue-axios의 원본 코드를 보았는데, 이것은 vue 플러그인의 방식에 따라 쓴 것이다.그러면 vue-axios를 결합하면 vue를 사용할 수 있다.방법을 썼어요.
우선 메인 포털 파일main.js에서 참조:

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios);

그 다음에 사용할 수 있습니다. 구성 요소 파일의 methods에서 사용할 수 있습니다.

getNewsList(){
   this.axios.get('api/getNewsList').then((response)=>{
    this.newsList=response.data.data;
   }).catch((response)=>{
    console.log(response);
   })
}

2. axios에서 Vue의 원형 속성으로 바꾸기(추천하지 않음)
우선 메인 포털 파일main.js에서 참조하고 vue의 원형 체인에 연결합니다.
import axios from 'axios'
Vue.prototype.$ajax= axios
어셈블리에서 사용:

this.$ajax.get('api/getNewsList')
.then((response)=>{
  this.newsList=response.data.data;
}).catch((response)=>{
  console.log(response);
})

Vuex를 결합한 action
vuex 창고 파일store에 있습니다.js에서 인용, 액션 추가 방법 사용

import Vue from 'Vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)
const store = new Vuex.Store({
 //  
 state: {
  user: {
   name: 'xiaoming'
  }
 },
 actions: {
  //   ajax  
  login (context) {
   axios({
    method: 'post',
    url: '/user',
    data: context.state.user
   })
  }
 }
})

export default store

구성 요소에서 요청을 보낼 때this.$를 사용해야 합니다store.dispatch

methods: {
 submitForm () {
  this.$store.dispatch('login')
 }
}

추가 정보: ElementUI는 VUE에서 main을 구성합니다.js와axios의 관계
1. main에서js:
import ElementUI from 'element-ui'
Vue.use(ElementUI)
2. main에서js에서 데이터 요청axios는 여기서 설정할 수 없습니다
상기 vue에서 전역적으로axios를 사용하는 조작은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.