快捷導(dǎo)航

Composition API思想封裝NProgress示例詳解

更新時間：2022年08月11日 09:53:20 作者：冒菜師

這篇文章主要為大家介紹了Composition API思想封裝NProgress示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

最近在用vue3封裝一套后臺管理模版，自然會用到NProgress。如果你沒有用過，你可以看一下instagram,youtube這些網(wǎng)站，它們都有一個頂部加載條，這也是現(xiàn)在最流行的網(wǎng)頁加載條。

于是我發(fā)現(xiàn)了@vueuse/integrations中的useNProgress,我們先看一下Anthony Fu大神如何去封裝的，然后咱們再去試著自己實(shí)現(xiàn)一下。

安裝和基本使用

npm i nprogress @vueuse/integrations

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

//router.js
import { createRouter, createWebHashHistory } from 'vue-router'
import { useNProgress } from '@vueuse/integrations/useNProgress'
// 通過useNProgress，導(dǎo)出一個isLoading
const { isLoading } = useNProgress(null,{
  showSpinner: false
})
const router = createRouter({
  history: createWebHashHistory(),
  routes:[/*省略路由*/]
})
// 在路由進(jìn)入和離開的時候時候，改變isLoading
router.beforeEach((to, from, next)=>{
  isLoading.value = true
  next()
})
router.afterEach((to, from, next)=>{
  isLoading.value = false
  next()
})
export default router

這樣就是實(shí)現(xiàn)了一個基本的進(jìn)度條，具體效果大家可以自行嘗試一下。

發(fā)現(xiàn)這個時候，我感覺很驚嘆，從來沒想過第三方庫也可以這樣的通過Composition API與vue去結(jié)合。而且，理論上這樣封裝我們是可以跨框架使用的。

自己實(shí)現(xiàn)一個

首先，我們定義一個入口函數(shù)，同時通過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：其實(shí)computed是可以修改的，只需要指定它的set就可以了
摒棄通過變量去控制，使用原始API，比如start，done。但這樣的話，我們其實(shí)沒有必要去封裝

于是我們開始修改代碼，使用computed.這樣就實(shí)現(xiàn)了與watch相同的效果，同時也吸收了computed的一些優(yōu)點(diǎn)。同時我們也把NProgress的一些原生API導(dǎo)出出來，用來實(shí)現(xiàn)更高的靈活性。

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, 
    }
}

但是，有時候我們并不僅使用默認(rèn)樣式或配置，這時候我們需要傳入配置。同時，有時候我們可能會自定義nprogress的實(shí)例,因此我把第一個參數(shù)命名為instance,第二個參數(shù)自然是options,這里其實(shí)無需我們?nèi)ゲ傩?，直接調(diào)用相關(guān)API即可。

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

在NProgress中有一個比較有趣的APIinc，我把它解釋為步進(jìn)，就是每次前進(jìn)一點(diǎn)。我們可以把這個功能封裝進(jìn)去。

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
    }
}

這樣，當(dāng)我們使用的時候，可以像我一開始的時候，直接使用isLoading,也可以使用step()實(shí)現(xiàn)步進(jìn)，也可以直接在傳入一個number,示例代碼如下

const {isLoading,progress,step} = useNProgress(0.1,null)
progress.value = 0.2 //進(jìn)度條加載到0.2
step() //每次自動步進(jìn)
isLoading.value=false //直接結(jié)束加載

這樣封裝是不是更好使用了呢。而且，由于我并沒有把vue-router和這個耦合在一起，因此理論上react也可以使用的。

以上就是Composition API思想封裝NProgress示例詳解的詳細(xì)內(nèi)容，更多關(guān)于Composition API封裝NProgress的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: