Nuxt vuex 상태 메뉴목록:구성 요소에서 정의되지 않음

Nuxt vuex 상태 메뉴목록:구성 요소에서 정의되지 않음

난 초보 프로그래머야

나는 nuxt 사용에 대한 질문이 있다 vuex get data for api.

따라서 vue 값은 null이지만 dev 툴 vue에는 데이터가 있다.

getter를 nuxt로 사용하는 방법

개발 도구의 이미지.

getter 및 state chachange: menuList에는 배열 데이터가 있지만 구성 요소에는 데이터가 없다.

구성 요소의 이 이미지

Component MenuList> computed> menuList: 정의되지 않음

이것은 나의 menu_list 입니다.부호 코드

computed: {
    menuList () {
      // eslint-disable-next-line no-console
      return this.$store.getters.getMenuList
    }
  },
  beforeCreated () {
    // eslint-disable-next-line no-console
    console.log(this.$store.state)
    this.$store.dispatch('chachang/fetchMenu')
  },
  created () {
    // eslint-disable-next-line no-console
    console.log(this.$store.state)
    this.$store.dispatch('chachang/fetchMenu')
  }

이 vuex 코드.차창/주.js

export default () => ({
  menuList: []
})

차창/액션.js

export default {
  async fetchMenu ({ commit }) {
    const response = await this.$axios.get('https://hlkittipan.github.io/rock-paper-scissors/menu.json')
    commit('SET_MENU', response.data)
  }
}

차창/뮤테이션.js

export default {
  SET_MENU (state, menu) {
    state.menuList = menu
  }
}

차창/게터.js

export default {
  getMenuList: (state) => {
    return state.menuList
  }
}

이 스토어/index.js

import chachangActions from './chachang/actions'
import chachangStates from './chachang/state'
import chachangGetters from './chachang/getters'
import chachangMutations from './chachang/mutations'

export const state = () => ({
  ...chachangStates.state,
})

export const mutations = {
  ...chachangMutations.mutations, 
}

export const actions = {
  ...chachangActions.actions
}

export const getters = {
  ...chachangGetters.getters
}

이거 먹어봐.

  async beforeMount () {
        const data = await this.$store.dispatch('chachang/fetchMenu')
        // eslint-disable-next-line no-console
        console.log(data)
      },computed: {
        menuList () {
          // eslint-disable-next-line no-console
          return this.$store.getters['chachang/getMenuList']
        }
      },

vuex에서 가져온 mapActions 및 mapGetters를 사용하도록 조언하겠다.

'vuex'에서 { mapGetters, mapActions } 가져오기

export default{
...
   methods:{
      ...mapActions('chachang',[ 'fetchMenu' ])
   },
   mounted(){
      this.fetchMenu() // better to use fetchData instead 
   }
   computed:{
      ...mapGetters('chachang', [ 'menuList' ])
   }

..
}

참조URL: https://stackoverflow.com/questions/66363486/nuxt-vuex-state-menulistundefined-in-component