一起写一个即插即用的一起写一个即插即用的Vue Loading插件实现插件实现
无论最终要实现怎样的网站，Loading状态都是必不可少的一环，给用户一个过渡喘息的机会也给服务器一个递达响应的时
间。
从使用方式说起从使用方式说起
不管从0开始写起还是直接下载的Loading插件，都会抽象为一个组件，在用到的时候进行加载Loading，或者通过API手动进
行show或者hide
<wait>
</wait>
...
this.$wait.show()
await fetch('http://example.org')
this.$wait.hide()
或者通过Loading状态进行组件间的切换
<loader v-if="isLoading">
</loader>
<Main v-else>
</Main>
。要想注册成全局状态，还需要给axios类的网络请求包添加拦截器，然后设置一个全局Loading状态，每次有网络请求或者根
据已经设置好的URL将Loading状态设置为加载，请求完成后在设置为完成。
注册axios拦截器：
let loadingUrls = [
`${apiUrl}/loading/`,
`${apiUrl}/index/`,
`${apiUrl}/comments/`,
...
] axios.interceptors.request.use((config) => {
let url = config.url
if (loadingUrls.indexOf('url') !== -1) {
store.loading.isLoading = true
}
})
axios.interceptors.response.use((response) => {
let url = response.config.url
if (loadingUrls.indexOf('url') !== -1) {
store.loading.isLoading = false
}
})
使用时在每个组件下获取出loading状态，然后判断什么时候显示loading，什么时候显示真正的组件。
<template>
<div>
<loader v-if="isLoading">
</loader>
<Main v-else>
</Main>
</div>
</template>
<script>
...
components: {
loader
},
computed: {
isLoading: this.$store.loading.isLoading
},
async getMainContent () {
// 实际情况下State仅能通过mutations改变.
this.$sotre.loading.isLoading = false
await axios.get('...')
this.$sotre.loading.isLoading = false
剩余6页未读，继续阅读
评论0