How to "get" to the getter with such a store structure?

Question

Vue.js

How to "get" to the getter with such a structure?

// 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
  }
}

I tried like this

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

But I get the error "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."

Answer 1

This solution helped

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