Vue は、vuex と axios に基づいたローディング効果と axios インストール構成を実装します。

この記事の内容は、vuex と axios インターセプターに基づいた Vue のローディング効果と、axios のインストールと設定についてです。必要な方は参考にしていただければ幸いです。

準備する

• vue-cliスキャフォールディングを使用してプロジェクトを作成します

• vuex、axiosをインストールするプロジェクトを入力します(npm install vuex、npm install axios)

ax iOS設定

プロジェクト 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をコンポーネントとして記述しますloading.vue

Vuexの状態state設定はloadingの可視性を制御します

store.js(Vuex)

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

定義状態の isShow 属性、デフォルトは非表示の false です

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

読み込みコンポーネントのバインディング状態の isShow に 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 インターフェイスをリクエストし、リクエストの結果全体を .then (データだけでなく) で返します

Axios インターセプター設定

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とは異なり、直接store.state 上記コードと同じ

エフェクト表示

関連する推奨事項:

vue Axiosメソッドの構成ステップ例

Vue、Vuexをベースに、Vue-routerはアニメーション切り替え機能を実装します

以上がVue は、vuex と axios に基づいたローディング効果と axios インストール構成を実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。