Nuxt.js：从 vuex 开始加载指示器

Question

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

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

有没有办法从 vuex 动作切换加载器？如何$root从 vuex 操作访问对象？

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);
    },
}

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