vue2でデータリクエスト表示読み込みグラフを実装する方法-jsチュートリアル-php.cn

vue2でデータリクエスト表示読み込みグラフを実装する方法

亚连

リリース： 2018-06-23 17:58:23

オリジナル

7644 人が閲覧しました

この記事では、主に vue2 でデータリクエストを表示するための読み込み図を詳しく紹介します。興味のある方は参考にしてください。一般的なプロジェクトでは、データをリクエストするときにデータリクエストを実行する必要があることがあります。 gif 画像は表示され、データがロードされると消えます。このために必要なのは、通常、カプセル化された axios に js イベントを記述することだけです。もちろん、最初にこのイメージを app.vue に追加する必要があります。以下の通り:

<template>
 <p id="app">
 <loading v-show="fetchLoading"></loading>
 <router-view></router-view>
 </p>
</template>

<script>
 import { mapGetters } from &#39;vuex&#39;;
 import Loading from &#39;./components/common/loading&#39;;

 export default {
 name: &#39;app&#39;,
 data() {
 return {
 }
 },
 computed: {
 ...mapGetters([
 &#39;fetchLoading&#39;,
 ]),
 },
 components: {
 Loading,
 }
 }
</script>

<style>
 #app{
 width: 100%;
 height: 100%;
 }
</style>

ログイン後にコピー

ここでの fetchLoading は vuex に格納されている変数です。 store/modules/common.js には次の定義が必要です:

/* 此js文件用于存储公用的vuex状态 */
import api from &#39;./../../fetch/api&#39;
import * as types from &#39;./../types.js&#39;
const state = {
 // 请求数据时加载状态loading
 fetchLoading: false
}
const getters = {
 // 请求数据时加载状态
 fetchLoading: state => state.fetchLoading
}
const actions = {
 // 请求数据时状态loading
 FETCH_LOADING({
 commit
 }, res) {
 commit(types.FETCH_LOADING, res)
 },
}
const mutations = {
 // 请求数据时loading
 [types.FETCH_LOADING] (state, res) {
 state.fetchLoading = res
 }
}

ログイン後にコピー

読み込みコンポーネントは次のとおりです:

<template>
 <p class="loading">
 <img src="./../../assets/main/running.gif" alt="">
 </p>
</template>

<script>
 export default {
 name: &#39;loading&#39;,
 data () {
 return {}
 },
 }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 .loading{
 position: fixed;
 top:0;
 left:0;
 z-index:121;
 width: 100%;
 height: 100%;
 background: rgba(0,0,0,0.3);
 display: table-cell;
 vertical-align: middle;
 text-align: center;
 }
 .loading img{
 margin:5rem auto;
 }
</style>

ログイン後にコピー

最後に、fetch/api.js にカプセル化された axios に判定読み込みイベントを記述します: 次のように

// axios的请求时间
let axiosDate = new Date()
export function fetch (url, params) {
 return new Promise((resolve, reject) => {
 axios.post(url, params)
 .then(response => {
 // 关闭 loading图片消失
 let oDate = new Date()
 let time = oDate.getTime() - axiosDate.getTime()
 if (time < 500) time = 500
 setTimeout(() => {
  store.dispatch(&#39;FETCH_LOADING&#39;, false)
 }, time)
 resolve(response.data)
 })
 .catch((error) => {
 // 关闭 loading图片消失
 store.dispatch(&#39;FETCH_LOADING&#39;, false)
 axiosDate = new Date()
 reject(error)
 })
 })
}
export default {
 // 组件中公共页面请求函数
 commonApi (url, params) {
 if(stringQuery(window.location.href)) {
 store.dispatch(&#39;FETCH_LOADING&#39;, true);
 }
 axiosDate = new Date();
 return fetch(url, params);
 }
}

ログイン後にコピー

これは実現されています。はい、プロジェクトにデータがロードされると、gif イメージが表示され、データがロードされると消えます。

vue.js 学習チュートリアルについては、特別な vue.js コンポーネント学習チュートリアルと Vue.js フロントエンドコンポーネント学習チュートリアルをクリックして学習してください。

Vue 学習チュートリアルの詳細については、特別なトピック「Vue 実践チュートリアル」を参照してください。

上記は私があなたのためにまとめたものです。関連記事：angular5を使用するためにサーバー側のレンダリング練習を実装する

vuexのリセットを実装する方法jqueryを使用してanimate.css（詳細なチュートリアル）をカプセル化するcli 設定ファイル (詳細なチュートリアル)

以上がvue2でデータリクエスト表示読み込みグラフを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。