将加载指示器添加到您的Vue.js应用程序

Loading indicators improve UX (user experience) in any application web or mobile. It tells the user that an action is being carried and a result will return shortly.

加载指示器可改善任何应用程序Web或移动设备中的UX（用户体验）。 它告诉用户正在执行某项操作，结果将很快返回。

In web applications, there are two major events that need loaders:

在Web应用程序中，有两个需要加载程序的主要事件：

• Network requests like navigating to a different page or an AJAX request.
  网络请求，例如导航到其他页面或AJAX请求。
• When a heavy computation is running.
  当大量计算正在运行时。

This article will show a few ways we can add loaders to our Vue.js applications.

本文将介绍几种将加载程序添加到Vue.js应用程序中的方法。

装载指示器的类型 ( Types of loading indicators )

The type of loading indicator you use on your website has either a positive or negative effect on the user. Primarily, there are two types of indicators we can use on our websites.

您在网站上使用的负载指示器的类型对用户有正面或负面的影响。 首先，我们可以在网站上使用两种类型的指标。

The first is a counter. It can be in the form of a progress bar or a counter that counts from zero to hundred. This is the most effective type of loading indicator as it gives the user a rough estimate of when the action they performed will complete.

首先是柜台。 它可以采用进度条或计数器（从零到一百）的形式。 这是最有效的加载指示符类型，因为它可以使用户大致估计他们何时完成的操作。

The second is a loop. This type of loader is some sort of running animation. The most common example we see on the web is a spinner.

第二个是循环。 这种类型的加载程序是某种正在运行的动画。 我们在网络上看到的最常见的示例是微调器。

While the counter loading indicator is most suitable for long running tasks, the loop indicator is perfect for short running tasks.

计数器加载指示器最适合长时间运行的任务，而循环指示器则非常适合短期运行的任务。

If you use a looping indicator for a long-running task, it builds the users anxiety and causes them to think that the site has broken, their action failed and so many negative thoughts. Users end up leaving websites (we don't want that). So for long running tasks, avoid looping indicators.

如果您将循环指示器用于长时间运行的任务，则会加剧用户的焦虑，并导致他们认为该站点已损坏，其操作失败以及许多负面想法。 用户最终离开网站（我们不想要那样）。 因此，对于长时间运行的任务，请避免循环显示指示器。

Either type of loading indicator is fine for short tasks even though looping indicators much better.

两种类型的加载指示器都适用于短期任务，即使循环指示器要好得多。

入门 ( Getting started )

Let's create a new project. I'll be using Vue CLI to scaffold our application. If you don't know what Vue CLI is, you can watch this.

让我们创建一个新项目。 我将使用Vue CLI搭建我们的应用程序。 如果您不知道什么是Vue CLI，则可以观看此内容 。

vue create indicator

The CLI will ask us what technologies we want to use in our application, for this demo, I chose Router and Vuex. Next, hit enter and wait while your application installs its dependencies.

CLI将询问我们要在应用程序中使用哪些技术，在此演示中，我选择了Router和Vuex。 接下来，按Enter键，然后在您的应用程序安装其依赖项时等待。

We'll also install nprogress to use as our loading indicator. You can use any loading indicator of your choice.

我们还将安装nprogress用作加载指示器。 您可以使用任何选择的加载指示器。

nprogress is a progress bar that attaches itself to the top of the page

nprogress是一个进度条，它附加在页面顶部

We won't be using npm or yarn for this, let's pull it straight from the CDN.

我们不会为此使用npm或yarn ，我们直接将其从CDN中拉出。

In the created Vue CLI project, navigate to public/index.html file and add the snippet below before the closing head tag.

在创建的Vue CLI项目中，导航到public/index.html文件，并在结束head标签之前添加以下代码段。

<link href="https://unpkg.com/nprogress@0.2.0/nprogress.css" rel="stylesheet" />
<script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>

使用nprogress (To use nprogress)

nprogress exposes a few API methods, but for this article we are only interested in the start and done methods. These methods start and stop the progress bar.

nprogress公开了一些API方法 ，但是对于本文，我们仅对start和done方法感兴趣。 这些方法启动和停止进度栏。

nprogress will also figure how to progress the loader, although this can be manually decided, we'll stick with the default behaviour for demonstration.

尽管可以手动确定加载程序，但nprogress还将计算出如何加载程序，我们将继续使用默认行为进行演示。

使用路由器 ( Using the Router )

When we use the router to add a progress bar to our website, the functionality we often want is: When a user navigates to a new page, the loader starts ticking at the top of the page showing the user the download progress of the next page.

当我们使用路由器将进度条添加到我们的网站时，我们经常需要的功能是：当用户导航到新页面时，加载程序开始在页面顶部打勾，向用户显示下一页的下载进度。 。

This is essentially what we want:

这实际上是我们想要的：

The good thing is Vue router comes with hooks we can hook into that lets us do this.

好消息是Vue路由器带有挂钩，我们可以将其挂钩，以便我们执行此操作。

Open the src/router.js file and replace the default export with the code below.

打开src/router.js文件，并将默认导出替换为以下代码。

const router = new Router({
  routes: [
      { path: '/', name: 'home', component: Home },
      { path: '/about', name: 'about', component: About }
  ]
})

router.beforeResolve((to, from, next) => {
  // If this isn't an initial page load.
  if (to.name) {
      // Start the route progress bar.
      NProgress.start()
  }
  next()
})

router.afterEach((to, from) => {
  // Complete the animation of the route progress bar.
  NProgress.done()
})

export default router

When we hook to the beforeResolve route, we are telling the router to start nprogress once a page request happens. The afterEach hook tells the router that after a link has completely evaluated stop the progress bar, it shouldn't care if the page request succeeds.

当我们挂接到beforeResolve路由时，我们告诉路由器一旦发生页面请求就启动nprogress 。 afterEach挂钩告诉路由器，在完全评估了链接之后，停止进度条，它不在乎页面请求是否成功。

使用您的HTTP库 ( Using your HTTP library )

Another part of the application we like to add progress bars is when our user makes an AJAX request.

我们希望添加进度条的应用程序的另一部分是用户发出AJAX请求时。

Most HTTP libraries today have a sort of middleware or interceptor that fires before a request or response happens. Because of this, we can also hook into our library of choice.

如今，大多数HTTP库都有一种中间件或拦截器，可在请求或响应发生之前触发。 因此，我们也可以加入我们选择的库。

I prefer using axios. They call it interceptors. To install:

我更喜欢使用axios 。 他们称其为拦截器。 安装：

# for yarn
yarn add axios

# for npm
npm install --save axios

Then we can configure axios to work like this.

然后，我们可以配置axios以使其工作。

// in HTTP.js
import axios from 'axios'

// create a new axios instance
const instance = axios.create({
  baseURL: '/api'
})

// before a request is made start the nprogress
instance.interceptors.request.use(config => {
  NProgress.start()
  return config
})

// before a response is returned stop nprogress
instance.interceptors.response.use(response => {
  NProgress.done()
  return response
})

export default instance

Then you can import and use the file above to handle your connections and get a progress bar every time a request is made.

然后，您可以导入并使用上面的文件来处理连接，并在每次发出请求时获得进度栏。

组件内的装载机 ( Loaders within components )

There are times when we are not making a page request or an AJAX request. It may just be a browser dependent action that takes time.

有时我们不发出页面请求或AJAX请求。 这可能只是取决于浏览器的操作，需要花费时间。

Let's create a custom DownloadButton component that can change its state to a loading state due to some external action.

让我们创建一个自定义的DownloadButton组件，由于某些外部动作，它可以将其状态更改为加载状态。

The component will take only one prop loading.

该组件将仅承受一次道具loading 。

<template>
  <DownloadButton :loading="loading">Download</DownloadButton>
</template>

Defining the component might look like this.

定义组件可能看起来像这样。

<template>
  <button class="Button" :disabled="loading">
      <svg v-if="loading" class="Button__Icon Button__Spinner" viewBox="...">
          <path d="..."/>
      </svg>
      <svg v-else class="Button__Icon" viewBox="0 0 20 20">
          <path d="..."/>
      </svg>
      <span v-if="!loading" class="Button__Content">
          <slot></slot>
      </span>
  </button>
</template>

<script>
export default {
  props: {
      loading: { type: Boolean }
  }
}
</script>

<style>
/* styles go here... duh! ;) */
</style>

Here's a quick example.

这是一个简单的例子。

可重复使用的装载机的HOC ( HOCs for Reusable Loaders )

We can create loaders as wrappers (HOCs) for our components that we can then modify its state via props.

我们可以为组件创建包装程序（HOC），然后可以通过props修改其状态。

These type of loaders are good for components that don't affect the global state of your application, but you still want the user to feel connected to the action in place.

这些类型的加载程序非常适合那些不会影响应用程序全局状态的组件，但您仍希望用户感觉与已完成的动作相关。

A quick and dirty example:

一个简单而肮脏的例子：

// This loader will add an overlay with the text of 'Loading...'
const Loader = {
  template: `
      <div class="{'is-loading': loading}">
          <slot/>
      </div>
  `,
  props: ['loading']
}

const Stats = {
  template: `
      <Loader :loading="updating">
      ...
      </Loader>
  `,
  props: ['updating']
}

const app = new Vue({
  template: `
  <div class="widget">
      <Stats :updating="fetchingStats"/>
      <Button @click="fetchingStats = true">
          Latest stats
      </Button>
  </div>
  `,
})

Here's an example of what it might look like:

这是一个可能看起来像的例子：

异步Vue组件 ( Async Vue components )

Vue's first class support for asynchronous components is nothing short of amazing. If you don't know what async components are? They basically let you fetch components from the server only when you need them.

Vue对异步组件的一流支持无与伦比。 如果您不知道什么是异步组件？ 它们基本上使您仅在需要时才从服务器获取组件。

So instead of serving end users components they might never use — only give them what they need. You can read more about them in the official document.

因此，与其为最终用户提供可能永远不会使用的组件，不如给他们所需的东西。 您可以在官方文档中阅读有关它们的更多信息。

Async components also come with native support for loading and error states, so no need for any special configuration here.

异步组件还提供了对加载和错误状态的本地支持，因此此处无需任何特殊配置。

const AsyncComponent = () => ({
  component: import('./MyComponent.vue'),
  // show this component during load
  loading: LoadingComponent,
  // show this component if it fails to load
  error: ErrorComponent,
  // delay before showing the loading component
  delay: 200,
  // error if the component failed to loadin is allotted time in milliseconds default in Infinity
  timeout: 3000
})

To use async components with the method I used above, you need to use Vue router lazy loading. It's async components on steroids.

要使用我上面使用的方法使用异步组件，您需要使用Vue路由器延迟加载 。 它是类固醇上的异步组件。

使用Vuex插件 ( Using Vuex plugins )

What this means is that you could create a custom Vuex plugin that auto triggers a loader. While this sounds like a feasible solution, I think it is hard to maintain and control the loading state and don't recommend it.

这意味着您可以创建一个自定义Vuex插件 ，该插件会自动触发加载程序。 虽然这听起来像是一个可行的解决方案，但我认为很难维护和控制加载状态，因此不建议这样做。

Honestly, I don't really know a way to make this work well out the box, it requires a lot of finagling to work.

老实说，我真的不知道如何使这项工作开箱即用，它需要大量的工作。

结论 ( Conclusion )

There are probably a few ways to define loading indicators in Vue apps that I didn't cover. There are also Vue dedicated plugins for doing this, but, I felt it made more sense to get a feeling for how it works.

我可能没有讲过几种在Vue应用程序中定义加载指标的方法。 也有Vue专用的插件来执行此操作，但是，我觉得了解它的工作原理更有意义。

Let me know in the comments if you think I missed a crucial method and I'll update the article.

如果您认为我错过了关键方法，请在评论中告诉我，我将更新本文。

Have a great day.

祝你有美好的一天。

翻译自: https://scotch.io/tutorials/add-loading-indicators-to-your-vuejs-application