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

Есть роут product, которой содержит в url id с продуктом
{
		path: '/product/:code',
		props: true,
		name: 'product',
		component: () => import('../views/Product'),
		meta: { scrollToTop: true },
	},


В App.vue я запрашиваю все продукты из БД, которая просто файл db.json:
created() {
	this.$store.dispatch('GET_PRODUCTS');
}


Store
async GET_PRODUCTS({ commit }) {
try {
	const response = await axios.get('http://localhost:8080/db/db.json');
	commit('setProducts', response.data);
} catch (error) {
	console.log(error);
}
},


Как в Product.vue узнать, что данные уже загруженны и добавить в стор текущий продукт.
Сейчас делаю это в created, но данные иногда не успевают загружаться и происходит ошибка.

created() {
	this.$store.dispatch('setProduct', this.code);
}


Экшен добавления продукта в стор:
setProduct({ state, commit }, code) {
			const products = state.products;
			let product = null;

			Object.values(products).some((val) => {
				product = val.find((item) => item.code === +code);
				return product;
			});

			const size = product.meta[0];

			commit('setProduct', product);
			commit('setSizeAndCost', size);
		},
  • Вопрос задан
  • 48 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
В App.vue я запрашиваю все продукты из БД

Если продукты должны быть доступны везде, может, тогда стоит сначала их получить, а потом уже инициализировать приложение:

store.dispatch('GET_PRODUCTS').then(() => {
  new Vue({ ... });
});

??

Если же отвечать непосредственно на спрошенное - установите наблюдение за значением в хранилище:

watch: {
  '$store.state.products': {
    immediate: true,
    handler(products) {
      if (products) {
        // можно что-то сделать
      }
    },
  },
},
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы