Nuxt.js: начать загрузку индикатора из vuex

Question

Согласно документации, есть способ вручную запустить индикатор загрузки текста в компоненте следующим образом:

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, поэтому теперь это указывает на глобальную загрузку при выполнении любого запроса к серверу.

Answer 2

Я использую 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>

Если он находится на стороне сервера, я возвращаю логотип приложения, а затем возвращаю приложение, если оно находится на стороне клиента. Вы также можете получить доступ к магазину после установки