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

Question

[Ростислав]

Есть роут 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);
		},

Answer 1

[0xD34F]

В App.vue я запрашиваю все продукты из БД

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

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

??

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

watch: {
  '$store.state.products': {
    immediate: true,
    handler(products) {
      if (products) {
        // можно что-то сделать
      }
    },
  },
},

Comments

[Ростислав]

Большое спасибо, учусь еще. День не мог решить это, а оказалось все просто, не правильно просто данные получал, действительно нужно же было до инициализации это сделать. Учить и учить еще)