Vue는 vuex 및 axios를 기반으로 로딩 효과 및 axios 설치 구성을 구현합니다.

이 기사에서 제공하는 내용은 vuex 및 axios 인터셉터를 기반으로 한 Vue의 로딩 효과와 axios의 설치 구성에 대한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 당신.

준비

• vue-cli 스캐폴딩을 사용하여 프로젝트 만들기# 🎜 🎜#

• vuex 및 axios를 설치하려면 프로젝트를 입력하세요(npm install vuex,npm install axios)

#🎜 🎜## 🎜🎜#axios 구성

프로젝트에 axios 모듈(npm install axios)을 설치한 후 다음 구성을 수행합니다. #🎜🎜 #

main.js

//引入axios
import Axios from 'axios'

//修改原型链，全局使用axios,这样之后可在每个组件的methods中调用$axios命令完成数据请求
Vue.prototype.$axios=Axios

컴포넌트 로드

선택합니다 여기서는 iview에서 제공하는 로드 컴포넌트를 사용하세요

npm install iview

main.js
import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);

설치 및 소개 후 로딩을 컴포넌트로 작성하세요 loading.vue

#🎜 🎜#

#🎜 🎜#

Vuex 상태 상태 설정은 로딩 가시성을 제어합니다

store.js (Vuex)# 🎜🎜#

export const store = new Vuex.Store({
    state:{
        isShow:false
    }
})

상태의 isShow 속성 정의, 기본 false는 숨겨짐

v-if="this.$store.state.isShow"

로드 중인 구성 요소 isShow in state에 v-if 바인딩 추가

#🎜 🎜#구성 요소는 axios를 사용하여 데이터를 요청합니다

<button>请求数据</button>

methods:{
        getData(){
            this.$axios.get('https://www.apiopen.top/journalismApi')
            .then(res=>{
                console.log(res)//返回请求的结果
            })
            .catch(err=>{
                console.log(err)
            })
        }
    }

버튼을 사용하여 이벤트를 트리거하고 get을 사용하여 요청합니다. 인터넷에서 무작위로 발견된 API 인터페이스. 그런 다음 요청의 전체 결과(데이터뿐만 아니라)를 반환합니다. 🎜#main.js

//定义一个请求拦截器
Axios.interceptors.request.use(function(config){
  store.state.isShow=true; //在请求发出之前进行一些操作
  return config
})
//定义一个响应拦截器
Axios.interceptors.response.use(function(config){
  store.state.isShow=false;//在这里对返回的数据进行处理
  return config
})

요청 인터셉터 정의(특정 작업 수행) 요청이 시작될 때) 및 응답 인터셉터(데이터 수신 후 특정 작업 수행)를 각각 차단하는 동안 수행되는 작업을 설정하고 상태에서 isShow의 부울 값을 변경하여 요청 데이터가 시작될 때 로딩을 표시하도록 로딩 구성요소를 제어합니다. 트리거되고 데이터가 반환될 때 로드를 숨깁니다 특별 주의: 여기에 vuex 상태에서 데이터를 호출하고 조작하는 구문 함정(여러 번 왔다 갔다 했습니다)이 있습니다. main.js의 this.$store.state와 컴포넌트의 this.$store.state가 다르지만 직접 store.state 위 코드와 동일# 🎜🎜#

효과 표시

# 🎜🎜#

# 🎜🎜#

관련 권장사항:
Vue 구성 axios 메소드 단계 예시

# 🎜🎜# Vue, Vuex, Vue 기반으로 애니메이션 전환 기능 구현- 라우터

위 내용은 Vue는 vuex 및 axios를 기반으로 로딩 효과 및 axios 설치 구성을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!