Nuxt.js: vuex에서 표시기 로드 시작

Nuxt.js: vuex에서 표시기 로드 시작

매뉴얼에 따르면 컴포넌트 내의 nuxt 로딩 인디케이터를 수동으로 기동하는 방법이 있습니다.

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

로더와 vuex 작업을 전환할 수 있는 방법이 있습니까?어떻게 하면$rootvuex 작업의 개체를 선택하십시오.

멋지다! 보아하니 이 정보는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 인터셉터에서 호출되므로 서버에 요청을 할 때 글로벌하게 로드됨을 나타냅니다.

사용하고 있다layouts/default.vue현재 프로세스가 서버 측인지 클라이언트 측인지 확인하는 파일입니다.예:

<template>
  <div class="fontFamily">
    <Nuxt v-if="isClient" />
    <div v-else class="container">
        <img class="logo" src="~/assets/images/logo-hori.png" />
    </div>
  </div>

</template>

<script>
export default {
    data() {
        return {
            isClient: false
        }
    },
    beforeMount () {
        this.isClient = false
    },
    mounted() {
        this.isClient = true
    }
}
</script>

서버 쪽이면 앱 로고를 반환하고 클라이언트 쪽이면 앱을 반송합니다.마운트 후에도 스토어에 액세스할 수 있습니다.

언급URL : https://stackoverflow.com/questions/51270636/nuxt-js-start-loading-indicator-from-vuex