Всем привет. Помогите с алгоритмом. В main.js в created вызывается vuex

Question

Всем привет. Помогите с алгоритмом. В main.js в created вызывается vuex

action в котором получаются данные и пишутся в state (async/await).
На странице я делаю фильтрацию данных которые получаю через getter.
Когда я загружаю страницу она пытается отфильтровать данные которых ещё нет в state из-за чего всё падает.
Как дождаться полной отработки получения данных и только тогда работать с ними?

#frontend #javascript #programming #russian #vue.js

0

01.10.2021

7 ответов

14 просмотров

Владимир Бандуристов Автор вопроса

Anton Permyakov
почему падает-то? если данных нет, то у тебя прост...

Не суть важно, падает или возвращает пустой массив. Суть вопроса именно в том, как мне сначала загрузить все данные в store, и лишь потом везде с ними работать?

0

01.10.2021

Mikhail Tadevosyan

Владимир Бандуристов
Не суть важно, падает или возвращает пустой массив...

грузи их, например, в корневом компоненте там по завершению загрузки - сетишь данные в стор и флаг какой-нибудь проставляешь завершения загрузки но вводных все равно как-то мало )

0

01.10.2021

Mikhail Tadevosyan

Владимир Бандуристов
Не суть важно, падает или возвращает пустой массив...

в том же сторе можешь держать условный признак загрузки данных и по нему отрисовывать компоненты

0

01.10.2021

Владимир Бандуристов Автор вопроса

Mikhail Tadevosyan
в том же сторе можешь держать условный признак заг...

Понял, спасибо. Покопаю в эту сторону.

0

01.10.2021

Mikhail Tadevosyan

Владимир Бандуристов
Понял, спасибо. Покопаю в эту сторону.

да не за что вроде вообще ж непонятно, что-то нормальное посоветовал или нет)

0

01.10.2021

Владимир Бандуристов Автор вопроса

Mikhail Tadevosyan
да не за что вроде вообще ж непонятно, что-то норм...

Если чуть подробнее. Я пишу мобильно приложение. При загрузке оно получает асинхронно данные из внутреннего хранилища телефона, пишет их в store. В main.js тут вызывается action. async beforeCreate() { await this.$store.dispatch("loadBoxes"); }, Он получается список коробок из внутреннего хранилища телефона, и пишет их в store. async loadBoxes({ commit }) { const { value } = await Storage.get({ key: "boxes" }); if (!value) { await Storage.set({ key: "boxes", value: JSON.stringify([]), }); commit("loadBoxes", []); } else { commit("loadBoxes", JSON.parse(value)); } }, На странице одной коробки, я ищу в этих данных по айдишнику из роутера нужный, и записываю в data что бы отобразить computed: { ...mapState({ allBoxes: (state) => state.boxes, }), } getSingleBoxInfo() { const boxInfo = this.allBoxes.find( (box) => box.id === this.$route.params.id ); this.moneyBox = { ...boxInfo, startDate: this.convertDate(boxInfo.startDate), endDate: this.convertDate(boxInfo.endDate), }; }, И вот тут уже возникает ошибка Cannot read property 'startDate' of undefined" так как boxInfo ещё пустой и соответственно он не может найти в нём startDate.

0

01.10.2021

Anton Permyakov · Accepted Answer

Anton Permyakov

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

0

01.10.2021

169 похожих чатов

Всем привет. Помогите с алгоритмом. В main.js в created вызывается vuex

7 ответов

Похожие вопросы