使用 Vue.js 实现 SPA 应用的全局 Loading-JavaScript中文网-JavaScript教程资源分享门户

在现代 Web 开发中，单页面应用（SPA）已经成为了不可忽视的趋势，特别是对于一些大型的 Web 项目，前端工程师需要使用 SPA 来实现更加流畅、便捷和高效的用户体验。然而，当用户点击页面链接时，应用需要在后台加载新的数据或页面内容。这个过程可能需要一定的时间，而这段时间内，用户应该看到一些提示信息来告知他们程序正在下载数据或者其他的用户反馈。

本文将会介绍如何使用 Vue.js 实现 SPA 应用的全局 Loading，为用户提供更加清晰和明确的反馈信息。

Vue.js 全局 Loading 的实现原理

在 SPA 中，我们通常只需要获取数据和加载视图。当我们加载新的数据时，我们希望前端能够实时地通知用户。我们可以确定用户的等待时间，以便对 Loading 进行控制。有时还需要对用户进行反馈。为此，我们可以使用 Vue.js 实现：

添加全局 Loading 组件。

我们可以使用 Vue.js 的全局组件功能来创建这个组件。全局组件是可以被应用程序的任何组件使用的组件。因此，我们可以在我们的 SPA 中的任何页面上使用这个 Loading 组件。

创建全局 Loading 状态。

我们可以在 Vue.js 的 store 中创建全局的 Loading 状态值。这个 Loading 状态值控制着 Loading 组件的显示和隐藏。

在 Vue.js 组件间共享这个 Loading 状态。

在 Vue.js 中，我们通常会使用 Vuex 来创建 store。在这个 store 中，我们将创建一个名为 loading 的状态。我们需要在应用程序的任何组件中使用这个 Loading 状态值，因此我们需要以 “$store.state.loading” 的方式在组件中设置和使用它。如果这个 Loading 状态被设置为 true，我们就显示全局的 Loading 组件；如果被设置为 false，我们就隐藏组件。

确定 Loading 状态的变化。

我们需要确定 Loading 状态的变化。这个变化通常和 Ajax 请求是同步的。我们可以通过在请求 Ajax 的时候设置这个 Loading 状态来进行同步变化。

Vue.js 全局 Loading 的实现方法

创建 Vue.js 的全局 Loading 组件：

// javascriptcn.com code example
// Loading.vue

<template>
  <div class="loading">
    <div class="spinner"></div>
  </div>
</template>

<style scoped>
/* 这里是样式代码 */
</style>

<script>
export default {
  name: 'Loading'
}
</script>

在这个组件中，我们定义了一个名为 Loading 的全局组件。在template 中添加组件的初始代码和样式。需要注意的是样式代码必须设置 scoped，这样的话，样式不会污染全局的 CSS 样式。

创建一个名为 store 的 Vuex store：

// javascriptcn.com code example
// store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    loading: false
  },
  mutations: {
    showLoading (state) {
      state.loading = true
    },
    hideLoading (state) {
      state.loading = false
    }
  }
})

在这个 store 中，我们创建了一个名为 loading 的状态，这个状态控制着 Loading 组件的显示和隐藏。我们在这个 store 中注入了 Vuex，并添加了 showLoading 和 hideLoading 方法。这两个方法分别用于显示和隐藏 Loading 组件。

在 Vue.js 的组件中使用这个 store 状态值：

// javascriptcn.com code example
// MyComponent.vue

<script>
export default {
  name: 'MyComponent',
  computed: {
    loading () {
      return this.$store.state.loading
    }
  },
  methods: {
    loadData () {
      this.$store.commit('showLoading')
      this.$http.get('/api/data').then(() => {
        // 加载数据成功
        this.$store.commit('hideLoading')
      }, () => {
        // 加载数据失败
        this.$store.commit('hideLoading')
      })
    }
  }
}
</script>

<template>
  <div>
    <loading v-if="loading" />
    <button @click="loadData">加载数据</button>
    <!-- 数据内容 -->
  </div>
</template>

在这个组件中，我们首先使用了 computed 方法来获取 Vuex 中的状态值，loading 是我们在 store 中定义的状态。然后，在 loadData 方法中，我们设置这个状态值并加载数据。如果这个请求成功，我们就调用 hideLoading 状态值的方法来隐藏 Loading；如果失败，我们也同样的调用 hideLoading 方法来隐藏 Loading 状态。

在模板中使用 loading 变量来判断展示全局 Loading 组件，当 loading 变量为 true 时，Loading 组件就会显示出来。

结论

通过这种方式，我们就可以简单、快捷地实现全局的 Loading，在 SPA 应用中提供有意义的反馈信息。我们可以使用全局组件来控制 Loading 的展示和隐藏，然后使用 Vuex store 中的状态值来确定 Loading 显示状态的变化。在应用程序中，我们可以在各个组件中共享这个状态。这种方式对于大型的和使用 SPA 应用的项目非常有用。通过 Vue.js，我们可以轻松地实现这个功能，优化用户体验，提高前端的工作效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/672dd2b3eedcc8a97c860e8e