Как связать геттер в сторе с компонентом?

Использую компонент Vue Image Select, данные для его работы беру со стора. Хочу использовать элемент select для выбора категории элементов.

<select v-model="theme" class="uk-select" id="theme" @change="onChangeTheme">
...
  methods: {
    onChangeTheme(event) {
      return this.$store.getters.showBackgrounds(event.target.value)
    }
  },


В сторе

showBackgrounds: state => theme => {
  return state.backgrounds.filter(back => {
    return back.theme === theme
  })
}


При переключении select'a ничего не происходит, что не так?
  • Вопрос задан
  • 66 просмотров
Пригласить эксперта
Ответы на вопрос 2
yarkov
@yarkov Куратор тега Vue.js
https://github.com/yarkovaleksei/toster-extension
При переключении select'a ничего не происходит

А что тут должно происходить? Обработчик (метод) onChangeTheme возвращает что-то и больше ничего не делает. Что вы ждёте от этого кода?
Ответ написан
Kozack
@Kozack Куратор тега Vue.js
Вы не правильно используйте Геттер.
Геттер — это вычисляемое свойство.

Например
redBackgrounds: function (state) {
  return state.backgrounds // В этот момент Vue записывает state.backgrounds в зависимости для redBackgrounds
    .filter(b => b === 'red') // Вычисляется и возвращается результат
}


При использовании
$store.getters.redBackgrounds // <-- Это свойство
/*
Функция которую мы писали выше будет запущена только один раз.
 Её результат будет кэширован. 
Кэш сбросится только в случае если одна из зависимостей, в нашем случае это state.backgrounds, изменится. 
Тогда наша функция-геттер запустится снова, пересчитает значение и оно снова кэшируется.
*/


В вашем же случае геттер выглядит так:
showBackgrounds: function () {
    return function () {} // <-- нет никаких зависимостей.
}


Важно отметить, что функции могут возвращаться геттерами. Но вы должны понимать в каких ситуациях это применимо и как работают геттеры
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы