Как вызвать функцию в компоненте после того как свойство в vuex store изменится?

228
07 сентября 2018, 22:40

У меня есть хранилище данных в vuex и два компонент. Первый компонент это range slider, в котором я меняю значения слайдера и сразу же отправляю их в store. Второй это компонент в котором мне нужно вызвать мою функцию при изменении store.

my store

state: {
    value: 0,
      rgbColors: {
        red: 0
      }
  },

Как я понимаю мне нужно использовать store.subscribe.watch.rgbColors.red или store.watch.rgbColors.red ведь так?

И если это так то как это использовать и вызвать функцию при изменении значения?

Answer 1

Просто поставьте watcher в нужном компоненте, не забыв замапить туда нужный state.

computed: {
    rgbColors() {
      return store.state.rgbColors;
    }
}
watch: {
    rgbColors: {
        handler(newValue, oldValue) {
            if(newValue !== oldValue) {
                //ваш код
            }
        },
        deep: true //если нужно отслеживать изменение свойств
    }
}
READ ALSO
Почему не создается таблица из массива данных из «LocalStorage»?
javascript

Почему не создается таблица из массива данных из «LocalStorage»?

Я хочу создать таблицу из данных, находящихся в localStorageДля этого реализован метод добавления: addToBook ()

 250
Как вывести данные json?
javascript

Как вывести данные json?

Доброй ночиУважаемые знатоки, подскажите, как прочесть данные типа json:

 316
Бесконечная загрузка страницы
javascript

Бесконечная загрузка страницы

Подгружаю html с помощью js так:

 251
Vue не реагирует на изменения объекта
javascript

Vue не реагирует на изменения объекта

Я тут учу vue и пишу простенький магазин для практикиИ не могу понять почему не обновляется корзина, то есть обновляется объект cart, но в разметке...

 241