當在vue項目中請求後臺接口時,常常會使用 loding 過渡數據的加載時間。
如果 loading 作爲一個全局的加載狀態,應該寫在項目中的App.vue中
<template>
<div id="app">
<router-view></router-view>
<loading v-if='LOADING'/> //自己封裝的loading 組件
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
這個Loading 組件通過 LOADING
的狀態顯示隱藏。我們希望在請求某個接口的時候,將 LOADING
改爲true,當接口請求後改爲false,這樣就能實現loading的過渡效果了。
但是這裏有一個問題,loading組件的顯示和隱藏是通過 LOADING
來控制的, 如果將 LOADING
直接定義在 App.vue
中,每次請求中直接修改 LOADING
是很麻煩的,所以推薦使用 vuex
第一步:按照官網的例子,在App.vue的同層目錄下新建一個 store.js
文件.
// store.js
const store = new Vuex.Store({
state: {
LOADING: false
},
mutations: {
showLoading(state){
state.LOADING = true
},
hideLoading (state) {
state.LOADING = false
}
}
})
第二步: 在 main.js
中引入 store.js
,並掛載到 Vue 實列上
import store from './store'
new Vue({
el: '#app',
store,
template: '<App/>',
components: { App }
})
第三步,在請求中改變 LOADING
的狀態
Vue 項目中 API 的請求方法有很多,如果項目比較簡單,數據量比較小,可以在在頁面中直接使用像 axios
、ajax
、request
等的 post/get
請求。以 axios
爲例:
methods:{
//通常請求都希望以異步的方式,方便數據操作
async test(){
this.$store.commit('showLoading')
//這裏需要將 axios 提前掛載到 Vue的屬性上。
await this.$axios.get('xxx/xxxx/xxx')
this.$store.commit('hideLoading')
}
}
第四步: 監聽 LOADING
狀態
Vuex 中 state
是動態更新的,也就是不管在任何地方對某一個 state的值做了修改,那麼依賴該數據的 DOM 也將會發生改變。修改 App.vue
文件,監聽 LOADING
的值的變化。
<template>
<div id="app">
<router-view></router-view>
<loading v-if='LOADING'/> //自己封裝的loading 組件
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
computed:{
...mapState([
'LOADING'
])
},
name: 'App'
}
</script>
總結:
loading的過渡效果最根本的就是通過state
來控制 loading 組件的顯示和隱藏。在請求接口前使該狀態爲 爲true
,接口完成後改爲false
。
簡單的 loading 組件。
一個簡單的 loading 組件,應該會有一個遮罩層,一個過度動畫,或者一個loading 說明。
<template>
<section>
<div class='mock'>
<div class='main'>
loading...
</div>
</div>
</section>
</template>
<style>
section{
width:100vh;
height:100vh;
position:relative;
}
.mock{
tion{
width:100vh;
height:100vh;
position:absolute;
z-index:100;
background-color:#abb2bf;
}
.main{
margin:200px auto;
text-align:center:
}
</style>