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

Question

[Сергей Примиренков]

Использую компонент 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 ничего не происходит, что не так?

Answer 1

[Alex]

Вы не правильно используйте Геттер.
Геттер — это вычисляемое свойство.

Например

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

При использовании

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

В вашем же случае геттер выглядит так:

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

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