Ок, спасибо за рецензию)

вчера столкнулся с проблемой в asyncData - при переходах когда используется один и тот же компонент с asyncData, бэк возвращает данные, но реактивность не срабатывает(если прокликать пару раз в обе стороны то реактивность работает)

asyncData(context) {
    let { $axios, route } = context;
    let {
      props: {
        default: { loadUrl },
      },
    } = route.matched.find(r => r.path.endsWith('categories'));
    console.log(route.matched.find(r => r.path.endsWith('categories')));
    return $axios
      .get(`/api/media/${loadUrl}`)
      .then(({ data }) => ({ categories: data.items || [] }))
      .catch(e => {
        console.error(`ОШИБКА В ПУТИ - /api/media/${loadUrl}`);
        return {
          categories: [],
        };
      });
  },

но если вынести загрузку в метод и на вотч повесить то реактивность работает как и предполагается

  watch: {
    loadUrl: {
      immediate: true,
      handler: 'loadCategories',
    },
  },
loadCategories() {
      return this.$axios
        .get(`/api/media/${this.loadUrl}`)
        .then(({ data }) => (this.categories = data.items || []))
        .catch(e => {
          console.error(`ОШИБКА В ПУТИ - /api/media/${this.loadUrl}`);
          this.categories = [];
        });
    },

как то нестабильно asyncData работает. Сталкивался кто с таким поведением?

могу видос записать для наглядности

у меня снова затык - прелоадер не отображается, как его отследить в инспекторе?

<template>
  <div
    v-if="loading"
    class="loading-page"
  >
    <p>
      Loading...
      frefreferf
      frefre
    </p>
  </div>
</template>

<script>
export default {
  data: () => ({
    loading: false,
  }),
  methods: {
    start () {
      console.log('1223')
      this.loading = true
    },
    finish () {
      this.loading = false
    },
  },
}
</script>

<style scoped>
.loading-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding-top: 200px;
  font-size: 30px;
  font-family: sans-serif;
}
</style>

это в пейдж компоненте

asyncData() {
    return new Promise(res => setTimeout(() => res({ qwe: 'test' }), 2000));
  },

просто ничего не показывается

и в инспекторе так же ничего нету

взял полностью отсюда
https://codesandbox.io/s/github/nuxt/nuxt.js/tree/dev/examples/custom-loading?from-embed=&file=/nuxt.config.js
мб стоит накст обновить - так как он уже месяцев 9 не обновлялся

е ку, раздуплите почему субкатегории не могу получить, мейн все ок, а суб хз че за, vuex export const getters = {
 ALL_CATS(state){
   return state.categories;
 },
 MAIN_CATS(state){
   return state.categories.filter(c => c.parent_id === 0);
 },
 SUB_CATS: state => id => {
   return state.categories.filter(c => c.parent_id === id);
 },
};<script>
 import {mapActions, mapGetters} from 'vuex'
 export default {
   computed: {
     ...mapGetters([
       'ALL_CATS',
       'MAIN_CATS',
       'SUB_CATS',
     ]),
   },
   methods: {
     ...mapActions([
       'GET_CATEGORIES'
     ]),
   },
   mounted() {
     this.GET_CATEGORIES()
   },
 }
</script>

!paste

Пожалуйста, не копируйте в чат большие куски кода, их все равно невозможно читать.
Воспользуйтесь специализированными сервисами для кода:
codesandbox.io
codepen.io
gist.github.com
pastebin.com
dpaste.org

В нуксте же из коробки есть

да ппц, я уже сам хз что творится

loading: { color: '#900000', height: '20px' },

даже это не отрабатывает

похорошему он должен сюда впилиться - но нет, ничего туда не приходит

Ну вот ты в роутер залез и поломал его. Возможно поэтому у тебя и перестал работать прелоадер из коробки

ща затещу)

я боюсь что я когда то давно воткнул дисплей none на него

😄

не, ну роутер тут не причем

какой то бред, я до лоадера могу достучаться только так