Как при изменении данных в LocalStorage отправлять новые запросы к API для обновления данных?

Question

[nastya_zholudeva]

При изменении города, данные об этом городе сохраняются в LocalStorage {"id":"78","name":"Санкт-Петербург"}. Так как использую Vue, все разбито на компоненты. И в каждом компоненте есть параметр запроса к API "town_id". Нужно чтобы при выборе другого города, шел новый запрос к API. При этом сайт работает без перезагрузки.

queryParams - это объект параметров для каждого запроса
callApi - функция запроса к API

queryParams.town_id = JSON.parse(localStorage.getItem('town')).id;

                callApi ('brends', queryParams,'').then((res) => {
                    this.brends = res.data.data;
                    var countItem = res.data.count_item;
                    this.numberOfPage = Math.ceil(countItem / lim);
                })

Как заставить делать новый запрос при выборе нового города?

Answer 1

[0xD34F]

Используйте watch. Внутри вашего компонента должно быть что-то такое:

watch: {
  town_id(val) {
    // ну а тут ваш запрос
  }
}

Comments

[nastya_zholudeva]

0xD34F, мне не очень понятно как реализовать это у меня.
queryParams - это объект параметров для каждого запроса
callApi - функция запроса к API

queryParams.town_id = JSON.parse(localStorage.getItem('town')).id;

                callApi ('brends', queryParams,'').then((res) => {
                    this.brends = res.data.data;
                    var countItem = res.data.count_item;
                    this.numberOfPage = Math.ceil(countItem / lim);
                })

[0xD34F]

nastya_zholudeva, что-то я запутался. Вы же в вопросе чёрным по белому написали, что у компонентов есть параметр town_id. Теперь вдруг выясняется, что этот town_id не параметр, а свойство какого-то непонятного объекта и вообще достаётся из localStorage. Ну и чему верить? Тьфу.

[nastya_zholudeva]

0xD34F,

И в каждом компоненте есть параметр запроса к API "town_id".

.
По сути вот, что представляет собой функция callApi

axios.get(api, {
        params: {
          town_id: JSON.parse(localStorage.getItem('town')).id
        },
      }).then((res) => {
                    this.brends = res.data.data;
                    var countItem = res.data.count_item;
                    this.numberOfPage = Math.ceil(countItem / lim);
                })

[0xD34F]

nastya_zholudeva, да, понял уже. На будущее: если вы говорите "в компоненте есть параметр бла-бла-бла", это означает, что речь идёт о параметре компонента. А не запроса, или о чём там ещё в вашем "бла-бла-бла" говорится.

Теперь, что делать. Могу предложить воспользоваться централизованной шиной событий. В компонентах, которые должны перезагружать данные при изменении города подписываетесь на событие, например town-change. А там, где происходит выбор нового города, вместе с записью города в localStorage делаете

$emit('town-change', /* ну а здесь id выбранного города... ну или ничего, всё равно вы его из localStorage достать можете */)

Или же, сделайте id города параметром компонента, и тогда можно будет использовать watch, как я в начале предложил.