Using Vuex with Nuxt.js - The right way

Question

I try to add Vuex to my Nuxt.js project. I made a custom ligthbox and to share through all pages I write the code into the default layout page.

From a page, to hide or show the ligthbox I need to change the state value. This is all the modules into the "store" folder:

// state.js
export const state = () => ({
    lightbox: false,
});

// getters.js
export const getters = {
    getLightbox(state)
    {
        return state.lightbox
    },
}

// actions.js
export const actions = {
    showLightbox({commit})
    {
        commit('UPDATE_LIGHTBOX', true)
    },
    hideLightbox({commit})
    {
        commit('UPDATE_LIGHTBOX', false)
    },
}

// mutations.js
export const mutations = {
    UPDATE_LIGHTBOX(state,value)
    {
        state.lightbox = value
    },
}

Then when I try to call "this.$store.state.lightbox" from a method I get an 500 error:

TypeError: Cannot read property 'getters' of undefined

Even I try to use this way and I get the same error:

import { mapGetters } from 'vuex'
export default {
    computed: {
        ...mapGetters(['getLightbox']),
        lightboxState()
        {
            return this.getLightbox
        },
    }
    mounted()
    {
        console.log( this.lightboxState )
    }
}

Later I try with asyncData but the console print an "undefined" value:

export default {
    asyncData({ store })
    {
        console.log('Store =',store);
    }
}

So, what is the right way to using Vuex with Nuxt.js? Maybe I need to add something else to "nuxt.config.js"?

Answer 1

If you're using separate files for state.js, getters.js, mutations.js and actions.js, they should only have a single, default export.

So instead of

// getters.js
export const getters = ...

you should use

// getters.js
export default {
  getLightbox: state => state.lightbox
}

This applies to all the files in your store directory.

See https://nuxtjs.org/guide/vuex-store/#modules-mode