Nuxt.js와 함께 Vuex 사용 - 올바른 방법

Nuxt.js와 함께 Vuex 사용 - 올바른 방법

나는 Nuxt.js 프로젝트에 Vuex를 추가하려고 한다.나는 사용자 정의 리그 박스를 만들었고 모든 페이지를 통해 코드를 기본 레이아웃 페이지에 쓰기 위해 공유했다.

페이지에서 ligth 박스를 숨기거나 표시하려면 상태 값을 변경해야 한다.다음은 "스토어" 폴더에 있는 모든 모듈:

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

그리고 나서 내가 "이것"이라고 부르려고 할 때.$store.state.lightbox"라는 메소드를 통해 500개의 오류가 발생하는 경우:

TypeError: Cannot read property 'getters' of undefined

이런 식으로 사용하려고 해도 똑같은 오류가 생긴다.

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

나중에 비동기 데이터로 시도하지만 콘솔에서 "정의되지 않은" 값을 인쇄:

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

그렇다면, Nuxt.js와 함께 Vuex를 사용하는 올바른 방법은 무엇일까?혹시 "nuxt.config.js"에 다른 것을 추가해야 할까?

다음에 대해 개별 파일을 사용하는 경우state.js,getters.js,mutations.js그리고actions.js기본 내보내기는 하나만 가져야 한다.

그래서 대신에

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

당신은 사용해야 한다.

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

이것은 당신의 모든 파일에 적용된다.store전화번호부

https://nuxtjs.org/guide/vuex-store/#8226-모드 참조

참조URL: https://stackoverflow.com/questions/62504794/using-vuex-with-nuxt-js-the-right-way