mapGetters from not an index.js store file

Question

I want to map getters from store/app.js file for example. I have a sidebar() getter in this file. In my component file I call:

export default {

  // ...

  computed: {
    ...mapGetters({
      sidebar: 'app/sidebar'
    }),

    // ...

    isCollapse() {
      return !this.sidebar.opened
    }
  }
}

but looks like it doesn't work, I received TypeError: Cannot read property 'opened' of undefined

store/app.js:

// ...

export const state = () => ({
  sidebar: {
    opened: true
  }
})

export const mutations = {
  // ...
}

export const actions = {
  // ...
}

export const getters = {
  sidebar(state) {
    return state.sidebar
  }
}

Answer 1

I'm not familiar with nuxt, so this is just a thought.

I don't see anything wrong with your setup. A cursory look at https://nuxtjs.org/guide/vuex-store implies that maybe a store/index.js file is required which you didn't mention.

If that doesn't work, I suggest adding this to your component to help debugging:

created() {
  console.log(this.$store); // <-- this is the vuex store accessed by the component
}