优雅地融入 Composition API 中的 NProgress

引言

NProgress 是一个流行的 JavaScript 库，它可以通过提供一个用户友好的进度条来增强你的 Web 应用程序的加载体验。它可以通过 Vue.js 中的 Composition API 与之无缝集成，从而实现响应式和高效的进度跟踪。

理解 Composition API

Composition API 是一种强大的 Vue.js 特性，它允许你以一种声明性的方式组织和重用代码。它通过从组件中分离状态和逻辑来实现这一目标，从而提高了可读性和可维护性。

集成 NProgress

步骤 1：安装 NProgress

首先，通过 npm 安装 NProgress：

npm install --save nprogress

步骤 2：导入 NProgress

接下来，在你的 Vue.js 组件中导入 NProgress：

import NProgress from 'nprogress'

步骤 3：使用 setup() Hook

Composition API 使用 setup() hook 来初始化组件状态和逻辑。我们将使用这个 hook 来设置 NProgress：

const setup = () => {
  NProgress.configure({ showSpinner: false })
}

在这个配置中，我们禁用了 NProgress 的 spinner 动画，因为它与 Composition API 的响应性体验不符。

步骤 4：跟踪加载状态

现在，让我们创建一个可观察的加载状态，它将由 NProgress 驱动：

const loading = ref(false)

步骤 5：监听加载事件

使用 watch() 效果监听加载状态的变化：

watch(loading, (newVal) => {
  if (newVal) {
    NProgress.start()
  } else {
    NProgress.done()
  }
})

步骤 6：触发加载状态

在适当的时候，使用 loading 反应式值来触发加载状态：

const fetchProducts = async () => {
  loading.value = true
  const products = await fetch('api/products')
  loading.value = false
  return products
}

细化集成

自定义加载条

你可以自定义 NProgress 加载条的外观。例如，要更改颜色，可以传递 template 选项：

NProgress.configure({
  template: `<div class="bar" role="bar"><div class="peg"></div></div>`,
  trickleSpeed: 1000
})

结合 Suspense

可以使用 Suspense API 与 NProgress 无缝协作，以防加载时间过长：

const App = {
  setup() {
    const data = await suspensePromise()
    NProgress.done()
    return { data }
  }
}

使用 Nuxt.js

在 Nuxt.js 中，你可以通过 nuxt.config.js 文件预配置 NProgress：

export default {
  nprogress: {
    showSpinner: false
  }
}

结论

通过巧妙地利用 Composition API，我们可以将 NProgress 集成到 Vue.js 应用程序中，从而为用户提供优雅的加载体验。使用可观察的加载状态、自定义配置和与 Suspense API 的结合，你可以创建响应式且高度可定制的进度跟踪。这不仅增强了用户的体验，还提高了应用程序的可信度。