Как «добраться» до геттера при такой структуре store?

Question

[nastya_zholudeva]

Как "добраться" до геттера при такой структуре?

// sliders.js
import api from '../config/api/client'

// initial state
export const state = () => ({
  info: {}
})

// getters
export const getters = {
  newProducts(state) {
    return state.info.newProducts
  }
}

// actions
export const actions = {
  getNewProductsSlider ({ commit }) {
    return api.get('v1/mainpage-info').then(result => {
      console.log('result', result.data.info.newProducts)
      commit('setNewProductsSlider', result.data.info)
    })
  }
}

// mutations
export const mutations = {
  setNewProductsSlider (state, data) {
    state.newProductsSlider = data
  }
}

Я пробовала так

computed:{
      ...mapGetters(['sliders/newProducts'])
    },

Но получаю ошибку "Property or method "newProducts" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property."

Comments

[askhat]

В шаблоне используется имя products, геттер называется newProducts. Пишите код внимательнее.

[nastya_zholudeva]

Askhat Bikmetov, это опечатка была. Поправила вопрос, все равно не работает

Answer 1

[nastya_zholudeva]

Вот такое решение помогло

computed: mapGetters({
      newProducts: 'sliders/newProducts'
    }),
created () {
      this.$store.dispatch('sliders/getNewProductsSlider')
    }

Comments

[askhat]

Ещё можно так

...mapGetters('sliders', [
  'getNewProductsSlider',
  'anotherGetter'
])

Но тогда имена компьютедов будут совпадать с именами геттеров