vue 2はデータ要求を実現してloading図を表示します。
一般的なプロジェクトでは、データ要求時にgif画像を表示し、データのロードが完了したら消えます。これは、一般的にはパッケージのaxiosにjsイベントを書き込むだけでいいです。もちろん、私達はまずap.vueの中でこのピクチャーに参加しなければなりません。以下のとおりです
vue.jsの学習教程については、テーマvue.jsコンポーネント学習教程、Vue.jsフロントエンドコンポーネント学習教程をクリックして学習してください。
もっと多いvue学習教程はテーマ『vue実戦教程』を読んでください。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
<template>
<div id="app">
<loading v-show="fetchLoading"></loading>
<router-view></router-view>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import Loading from './components/common/loading';
export default {
name: 'app',
data() {
return {
}
},
computed: {
...mapGetters([
'fetchLoading',
]),
},
components: {
Loading,
}
}
</script>
<style>
#app{
width: 100%;
height: 100%;
}
</style>
ここのfetch Loadingはvuexに存在する変数です。store/modules/common.jsには以下のような定義が必要です。
/* js vuex */
import api from './../../fetch/api'
import * as types from './../types.js'
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
}
}
loadingコンポーネントは以下の通りである。
<template>
<div class="loading">
<img src="./../../assets/main/running.gif" alt="">
</div>
</template>
<script>
export default {
name: 'loading',
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/appi.jsにパッケージされたaxiosにloadingイベントを書き込みます。以下の通りです。
// 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('FETCH_LOADING', false)
}, time)
resolve(response.data)
})
.catch((error) => {
// loading
store.dispatch('FETCH_LOADING', false)
axiosDate = new Date()
reject(error)
})
})
}
export default {
//
commonApi (url, params) {
if(stringQuery(window.location.href)) {
store.dispatch('FETCH_LOADING', true);
}
axiosDate = new Date();
return fetch(url, params);
}
}
これにより、プロジェクト中にデータをロードすると、gif画像が表示され、データがロードされると消えることができます。vue.jsの学習教程については、テーマvue.jsコンポーネント学習教程、Vue.jsフロントエンドコンポーネント学習教程をクリックして学習してください。
もっと多いvue学習教程はテーマ『vue実戦教程』を読んでください。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。