Как во Vue асинхронно изменить данные в data?

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

В App.vue загружаю данные в state:
created() {
		this.$store.dispatch('GET_PRODUCTS');
	},


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


Mutation:
initProducts(state, products) {
	state.products = products;
}


Getter:
productDefaultSize: (state) => (code) => {
	const products = state.products;
	let product = null;

	for (let key in products) {
		product = products[key].find((item) => item.code === +code);

		if (product) {
			break;
		}
	}

	return product.meta[0];
}


Data роута в котором мне нужны данные:
data() {
	return {
		counter: 1,
		picked: null,
		loading: true,
	};
}


В хуке пытаюсь получить данные:
created() {
	this.picked = this.$store.getters.productDefaultSize(this.code);
	this.loading = false;
}
  • Вопрос задан
  • 62 просмотра
Пригласить эксперта
Ответы на вопрос 1
Попробуйте перенести получение данных в mounted() используя await. До загрузки данных покажите какой-нибудь preloader.
Ответ написан
Ваш ответ на вопрос

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

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