Composition API封装NProgress

时间:2022-09-28 冒菜师人气:0

正文

最近在用vue3封装一套后台管理模版，自然会用到NProgress。如果你没有用过，你可以看一下instagram,youtube这些网站，它们都有一个顶部加载条，这也是现在最流行的网页加载条。

于是我发现了@vueuse/integrations中的useNProgress,我们先看一下Anthony Fu大神如何去封装的，然后咱们再去试着自己实现一下。

安装和基本使用

npm i nprogress @vueuse/integrations

基本使用如下,我们在定义vue-router的地方使用

//router.js
import { createRouter, createWebHashHistory } from 'vue-router'
import { useNProgress } from '@vueuse/integrations/useNProgress'
// 通过useNProgress，导出一个isLoading
const { isLoading } = useNProgress(null,{
  showSpinner: false
})
const router = createRouter({
  history: createWebHashHistory(),
  routes:[/*省略路由*/]
})
// 在路由进入和离开的时候时候，改变isLoading
router.beforeEach((to, from, next)=>{
  isLoading.value = true
  next()
})
router.afterEach((to, from, next)=>{
  isLoading.value = false
  next()
})
export default router

这样就是实现了一个基本的进度条，具体效果大家可以自行尝试一下。

发现这个时候，我感觉很惊叹，从来没想过第三方库也可以这样的通过Composition API与vue去结合。而且，理论上这样封装我们是可以跨框架使用的。

自己实现一个

首先，我们定义一个入口函数，同时通过ref来定一个isLoading,同时为了兼容vue2，我们可以使用vue-demi这个库。

import { ref, watch } from 'vue-demi'
import nprogress from 'nprogress'
export const useNProgress = ()=>{
 const isLoading = ref(false)
 watch(isLoading,(newVal)=>{
     if(newVal){
         return nprogress.start()
     }
     return nprogress.done()
 })
 return {
     isLoading
 }
}
export default useNProgress

这样就可以说完成了基本的封装，但是并不完美，watch并不是最好的解决方案，我在这里还有2种更好解决方法。

computed + set：其实computed是可以修改的，只需要指定它的set就可以了
摒弃通过变量去控制，使用原始API，比如start，done。但这样的话，我们其实没有必要去封装

于是我们开始修改代码，使用computed.这样就实现了与watch相同的效果，同时也吸收了computed的一些优点。同时我们也把NProgress的一些原生API导出出来，用来实现更高的灵活性。

import { ref, computed } from 'vue-demi'
import nprogress from 'nprogress'
export const useNProgress = (instance,options)=>{
    const isLoading = computed({
     get:() => nprogress.isStarted() && nprogress.value<1,
     set:status => status ? nprogress.start() : nprogress.done()
    })
    return {
        isLoading, 
        start: nprogress.start, 
        done: nprogress.done, 
    }
}

但是，有时候我们并不仅使用默认样式或配置，这时候我们需要传入配置。同时，有时候我们可能会自定义nprogress的实例,因此我把第一个参数命名为instance,第二个参数自然是options,这里其实无需我们去操心，直接调用相关API即可。

/*省略其他逻辑*/
const progress = ref(instance)
if(options){
    nprogress.configure(options)
}

在NProgress中有一个比较有趣的APIinc，我把它解释为步进，就是每次前进一点。我们可以把这个功能封装进去。

import { ref, computed,watchEffect,unref } from 'vue-demi'
import nprogress from 'nprogress'
export const useNProgress = (instance,options)=>{
    const isLoading = computed({
     get:() => nprogress.isStarted() && nprogress.value<1,
     set:status => status ? nprogress.start() : nprogress.done()
    })
    const progress = ref(instance)
    if(options){
        nprogress.configure(options)
    }
    watchEffect(()=>{
     if(typeof unref(progress) === 'number'){
         nprogress.set(progress.value)
     }
    })
    return {
        isLoading, 
        progress,
        step: nprogress.inc,
        start: nprogress.start, 
        done: nprogress.done, 
        reset()=>progress.value=0
    }
}

这样，当我们使用的时候，可以像我一开始的时候，直接使用isLoading,也可以使用step()实现步进，也可以直接在传入一个number,示例代码如下

const {isLoading,progress,step} = useNProgress(0.1,null)
progress.value = 0.2 //进度条加载到0.2
step() //每次自动步进
isLoading.value=false //直接结束加载

这样封装是不是更好使用了呢。而且，由于我并没有把vue-router和这个耦合在一起，因此理论上react也可以使用的。

加载全部内容