vue.js - Nuxt.js:从 vuex 开始加载指示器

Question

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

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

有什么方法可以从 vuex Action 切换加载器吗？如何从 vuex 操作访问 $root 对象？

Answer 1

甜!显然它可以通过客户端上可用的 window 属性访问。建议通过检查 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);
    },
}

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