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

Question

[Ростислав]

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

В 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;
}

Answer 1

[Dmitry Barkowski]

Попробуйте перенести получение данных в mounted() используя await. До загрузки данных покажите какой-нибудь preloader.