怎么使用Composition?API思想封裝NProgress

這篇文章主要講解了“怎么使用Composition API思想封裝NProgress”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么使用Composition API思想封裝NProgress”吧！

正文

最近在用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也可以使用的。

感謝各位的閱讀，以上就是“怎么使用Composition API思想封裝NProgress”的內容了，經過本文的學習后，相信大家對怎么使用Composition API思想封裝NProgress這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！