How to bind a getter in a store to a component?

Question

Vue.js

I use the Vue Image Select component , I take the data for its operation from the store. I want to use a select element to select a category of elements.

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

Store

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

When switching select'a nothing happens, what's wrong?

Answer 1

You are using the getter incorrectly.
A getter is a computed property.
for example

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

Using

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

In your case, the getter looks like this:

showBackgrounds: function () {
    return function () {} // <-- нет никаких зависимостей.
}

It is important to note that functions can be returned by getters. But you need to understand in what situations it is applicable and how getters work