nuxt 我可以手动显示加载指示器吗？答案

【问题标题】：nuxt can I manually show the loading indicator?nuxt 我可以手动显示加载指示器吗？
【发布时间】：2017-10-30 18:06:26
【问题描述】：

当我在所有 ajax 调用的路由之间导航时，我想使用显示在 nuxt 中的加载指示器。

我可以以某种方式触发指示器显示吗？

【问题讨论】：

您找到解决方案了吗？请分享。我的项目需要它。谢谢

标签： nuxt.js

【解决方案1】：

在新版本中是 this.$nuxt.loading.start()

methods: {
  search() {
    this.$nuxt.$loading.start() //STARTS LOADING
    this.$axios
      .get('/api/product')
      .then((response) => {
        this.$nuxt.$loading.finish() //STOPS LOADING
        this.results = response.data
      })
      .catch((err) => {
        this.$store.commit('snackbar/add', err.response.data)
    })
  }
}

注意

如果您将dark 设置为false，则进度条将以白色和白色背景显示，将不可见。记得在 nuxt.config.js 中更改进度的颜色

【讨论】：

【解决方案2】：

methods: {
  async onSubmit() {
    try {
      this.$root.$loading.start();
      const result = await someAsyncMethod();
    } catch (err) { 
      // this.$toast.error(err.message);
    } finally { 
      this.$root.$loading.finish(); 
    }
},

这可能是使用默认加载指示器的典型异步方法。

【讨论】：

谢谢！ vuex中如何访问$root对象，有什么想法吗？