Composition API思想封裝NProgress示例詳解

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

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

正文

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

于是我發(fā)現(xiàn)了@vueuse/integrations中的useNProgress,我們先看一下Anthony Fu大神如何去封裝的，然后咱們?cè)偃ピ囍约簩?shí)現(xiàn)一下。

安裝和基本使用

npm i nprogress @vueuse/integrations

基本使用如下,我們?cè)诙xvue-router的地方使用

//router.js
import { createRouter, createWebHashHistory } from 'vue-router'
import { useNProgress } from '@vueuse/integrations/useNProgress'
// 通過(guò)useNProgress，導(dǎo)出一個(gè)isLoading
const { isLoading } = useNProgress(null,{
  showSpinner: false
})
const router = createRouter({
  history: createWebHashHistory(),
  routes:[/*省略路由*/]
})
// 在路由進(jìn)入和離開(kāi)的時(shí)候時(shí)候，改變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)了一個(gè)基本的進(jìn)度條，具體效果大家可以自行嘗試一下。

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

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

首先，我們定義一個(gè)入口函數(shù)，同時(shí)通過(guò)ref來(lái)定一個(gè)isLoading,同時(shí)為了兼容vue2，我們可以使用vue-demi這個(gè)庫(kù)。

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

這樣就可以說(shuō)完成了基本的封裝，但是并不完美，watch并不是最好的解決方案，我在這里還有2種更好解決方法。

computed + set：其實(shí)computed是可以修改的，只需要指定它的set就可以了
摒棄通過(guò)變量去控制，使用原始API，比如start，done。但這樣的話，我們其實(shí)沒(méi)有必要去封裝

于是我們開(kāi)始修改代碼，使用computed.這樣就實(shí)現(xiàn)了與watch相同的效果，同時(shí)也吸收了computed的一些優(yōu)點(diǎn)。同時(shí)我們也把NProgress的一些原生API導(dǎo)出出來(lái)，用來(lái)實(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, 
    }
}

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

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

在NProgress中有一個(gè)比較有趣的APIinc，我把它解釋為步進(jìn)，就是每次前進(jìn)一點(diǎn)。我們可以把這個(gè)功能封裝進(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)我們使用的時(shí)候，可以像我一開(kāi)始的時(shí)候，直接使用isLoading,也可以使用step()實(shí)現(xiàn)步進(jìn)，也可以直接在傳入一個(gè)number,示例代碼如下

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

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

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

您可能感興趣的文章: