Подгрузка данных при обновлении страницы, axios, vuejs, vue-router

Question

При переходе по ссылкам роутинга данные из json подгружаются нормально, но стоит обновить страницу "Каталог", как данные не подгружаются и появляется оповещение что "Нет товаров с выбранными параметрами " . Использую vuex, axios. Вызываю action initStore из created

// modules/products
...
  mutations: {
    'SET_STORE'(state, products) {
      state.items = products;
    },

    },
  actions: {
    initStore: ({commit}) => {
      axios.get('items.json')
        .then(response => {
          commit('SET_STORE', response.data.items)
        });
    },

  },
...
// pages/Catalog.vue
...

computed: {
      ...mapGetters('products', {
      products: 'items'
       })
     },
created(){
                this.$store.dispatch('products/initStore');
                this.sorteredProducts = [...this.products];
...

Answer 1

Попробуйте так

...
mutations: {
    'SET_STORE' (state, products) {
      state.items = products;
    },
  },
  actions: {
    async initStore: ({
      commit
    }) => {
      const response = await axios.get('items.json')
      commit('SET_STORE', response.data.items)
    },
  },
...
// pages/Catalog.vue
...
  computed: {
    ...mapGetters('products', {
      products: 'items'
    }) // не совсем понятно что вот это
  },
  async created() {
    await this.$store.dispatch('products/initStore');
    this.sorteredProducts = [...this.products];
  }
...

Answer 2

Проблема была не в промисе и запросе, а в алгоритме присвоения к массиву отсортированных продуктов:

Надо:

        methods: {
            sortProducts() {
                     let sorteredProducts = [...this.products].filter((elem) => {
                        if (this.activeColor !== 'all') {
                            return (elem.colors.indexOf(this.activeColor) !== -1) && parseInt(elem.cost) >= this.minPrice && parseInt(elem.cost) <= this.maxPrice
                        }
                        else {
                            return ( parseInt(elem.cost) >= this.minPrice && parseInt(elem.cost) <= this.maxPrice)
                        }
                    });
                    return sorteredProducts;
            }
        },

А было:

methods: {
  sortProducts() {
    this.sorteredProducts = [...this.products].filter((elem) => {
                        if (this.activeColor !== 'all') {
                            return (elem.colors.indexOf(this.activeColor) !== -1) && parseInt(elem.cost) >= this.minPrice && parseInt(elem.cost) <= this.maxPrice
                        }
                        else {
                            return ( parseInt(elem.cost) >= this.minPrice && parseInt(elem.cost) <= this.maxPrice)
                        }
                    });
}

}

БЛОГ НА HUSL

Подгрузка данных при обновлении страницы, axios, vuejs, vue-router

Ответы (2 шт):