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

Question

[nastya_zholudeva]

У меня на сайте происходят запросы к API, один из параметров для запроса - это town_id.
А значение, которое мы подставляем туда берем из LocalStorage

town_id: JSON.parse(localStorage.getItem('town')).id,

. Помещаем его туда, автоматически определяя местоположение пользователя и отправляя нужный запрос к API. В результате получаем такой объект

{
                        "id": 2379,
                        "name": "г. Москва",
                        "region": "Московская обл.",
                        "lat": "55.755814",
                        "long": "37.617635",
                        "update_at": 1489006800
                    };

который и помещаем в LocalStorage.

Однако если очистить LocalStorage и перезагрузить страницу, то

console.log((JSON.parse(localStorage.getItem('town'))));

возвращает null. И поэтому нечего ложить в town_id.
Более подробно на видео. https://www.dropbox.com/s/mzek869z13kbrea/ice_vid...

Работаю с vue.js

Answer 1

[tema_sun]

А в чем сложность проверять локалсторалдж и если он пустой, то слать запрос к апи?

p.s. класть

Comments

[nastya_zholudeva]

tema_sun Как бы эта проверка есть. Именно поэтому пустой LocalStorage заполняется данными. Но получается как бы он заполняется позже, чем идет заполнение данных в компонентах. Хотя проверка происходит в beforeCreate()

[lavezzi1]

nastya_zholudeva, 1. Используйте хук created() {...}. 2. Крутите спинер и скрывайте через v-if все компоненты.

[nastya_zholudeva]

lavezzi1, не очень понятен второй пункт)

[lavezzi1]

nastya_zholudeva, То есть если ваши данные не готовы, прячьте компоненты чтобы ошибки не повалились. А после того, как данные готовы, делаете

this.isDataReady =
 true

и отображаете компоненты уже с данными.

[nastya_zholudeva]

lavezzi1, Сделала так

<div v-if="$route.fullPath == '/' || localStorageNoEmpty">
                <GreyBrands/>
  </div>


<script> 
data () {
            return {
                localStorageNoEmpty: true,
                localStorage: {}
            }
        },

created: function () {
            this.$nextTick(function () {
                this.localStorage = JSON.parse(localStorage.getItem('town'));
                this.localStorageNoEmpty = (this.localStorage !== null);
           })    
        },
</script>

но все равно ошибка, что "Cannot read property 'id' of null" в моем компоненте

[lavezzi1]

nastya_zholudeva, Так потому что v-if положительный и он отрабатывает. Нужно сделать что то подобное:

<div v-if="!isLocalstorageEmpty">Loading your data...</div>
<div v-else>
    <GreyBrands/>
</div>

[nastya_zholudeva]

lavezzi1, сделала как вы сказали, но ошибка "Cannot read property 'id' of null", которая возникает в моем компоненте из-за строчки

town_id: JSON.parse(localStorage.getItem('town')).id,

не пропала

[nastya_zholudeva]

lavezzi1, а есть какой-то способ как-то еще раз подгружать данные. Потому как если посмотреть видео, которое я оставляла в вопросе, то видно, что данные в LocalStorage загружаются, но чуть позже. Из-за этого "чуть" во все компоненты кладется null, а не данные с LocalStorage