如何在NUXT插件中显示所有Axios请求的全局加载

Question

我想在全球范围内显示所有Axios请求的

加载

定义

    export default function ({ app, $axios, redirect, store }, inject) {
    
    
        $axios.onRequest(config => {
            this.$nuxt.$loading.start()
        })
    
        $axios.onError(error => {
            this.$nuxt.$loading.finish()
        })
    
      
    }

自 强>在这里。

那么如何修改此代码？

Answer 1

NUXT加载属性用于跟踪页面加载状态。这是您可以用自定义组件替换的内部组件：

// nuxt.config.js
export default {
  loading: '~/components/YourLoadingComponent.vue'
}

但它与为HTTP请求设置加载状态的功能不同。我推荐您创建一个组件来管理HTTP请求的加载状态，并且可以使用VUEX管理当前加载状态，然后从axios.js.js插件中修改商店。

// axios.js plugin
export default function ({ $axios, store }) {

  $axios.onRequest(config => {
    store.dispatch('setLoadingStatus', true)
  })

  $axios.onError(error => {
    store.dispatch('setLoadingStatus', false)
  })

}

然后，您可以管理请求状态：

// store/index.js file
export const state = () => ({
  isRequestLoading: false
})

export const mutations = {
  saveLoadingStatus(state, payload) {
    state.isRequestLoading = payload
  }
}

export const actions = {
  setLoadingStatus({ commit }, status) {
    commit('saveLoadingStatus', status)
  }
}

并且非常简单的示例组件：

<template>
  <div>
    <p v-if="isRequestLoading">Is Loading</p>
    <p v-else>Request completed</p>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      isRequestLoading: (state) => state.isRequestLoading
    })
  }
}
</script>

您可以将加载条或旋转器设置在此组件内的窗口中显示。