Navigating the intricacies of sub-State mapping in Nuxtjs

Question

I have set up a state called ~/store/modules/general/index.js

Within this state, there are Actions named get_info and get_pages,

as well as states named info and pages.

When I use

...mapActions({
getInfo: 'modules/general/get_info'
getPages: 'modules/general/get_pages'
})

everything works fine. However, when I try to access it using

...mapState({
Info: 'modules/general/info'
Pages: 'modules/general/pages'
})

it returns undefined.

Finally, if I use

...mapState({
modules: 'modules'
})

this will return all my substates. Please help me resolve this issue.

Answer 1

Answer №1

It's recommended to map the state twice in order to access both 'info' and 'pages' states within your components:

computed: {
    ...mapState('modules/general/info', ['get_info']),
    ...mapState('modules/general/pages', ['get_pages']) 
}

Alternatively, you can map the states like this:

computed: {
  ...mapState('modules/general', {
    info: state => state.info,
    pages: state => state.pages
  })
},

For more information on binding helpers with namespace, please refer to this link

Answer 2

It's recommended to map the state twice in order to access both 'info' and 'pages' states within your components:

computed: {
    ...mapState('modules/general/info', ['get_info']),
    ...mapState('modules/general/pages', ['get_pages']) 
}

Alternatively, you can map the states like this:

computed: {
  ...mapState('modules/general', {
    info: state => state.info,
    pages: state => state.pages
  })
},

For more information on binding helpers with namespace, please refer to this link

Answer 3

If you want to specifically access only certain states from the store in Vue, this code snippet will guide you in the right direction.

Assuming that your Vue component is already connected to the Vuex store based on the code provided.

Make sure to replace 'general' with 'modules/general' as needed.

computed: {
  ...mapState('general', {
    info: state => state.info
  })
}

Answer 4

If you want to specifically access only certain states from the store in Vue, this code snippet will guide you in the right direction.

Assuming that your Vue component is already connected to the Vuex store based on the code provided.

Make sure to replace 'general' with 'modules/general' as needed.

computed: {
  ...mapState('general', {
    info: state => state.info
  })
}