Nuxt.js:从 vuex 开始加载指示器 [英] Nuxt.js: Start loading indicator from vuex

问题描述

根据文档，有一种方法可以手动启动组件中的 nuxt 加载指示器:

According to documentation, there is a way to manually start the nuxt loading indicator in a component as such:

export default {
    methods: {
        startLoading() {
            this.$root.$loading.start();
        },
    },
}

有什么办法可以从 vuex 动作中切换加载器吗?如何从 vuex 操作访问 $root 对象?

Is there any way to toggle the loader from a vuex action? How can I access the $root object from a vuex action?

推荐答案

Sweet!显然，它可以通过客户端上可用的 window 属性访问.建议通过检查 process.browser 来确认操作是在客户端上运行，而不是在服务器上运行:

Sweet! Apparently it can be accessed through the window property which is available on client. It would be advisable to confirm that the action is run on the client, not on server, by checking process.browser:

export const actions = {
    startLoading({ commit }) {
        if (process.browser) {
            window.$nuxt.$root.$loading.start();
        }
        commit('SET_LOADING', true);
    },
    finishLoading({ commit }) {
        if (process.browser) {
            window.$nuxt.$root.$loading.finish();
        }
        commit('SET_LOADING', false);
    },
}

很酷.这些动作是从 axios 拦截器调用的，所以现在它在向服务器发出任何请求时指示全局加载.

Pretty cool. The actions are called from axios interceptors, so now it indicates loading globally when making any request to the server.

这篇关于Nuxt.js:从 vuex 开始加载指示器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！