Vuex 저장소 개체의 속성에 액세스할 수 없습니다.

Vuex 저장소 개체의 속성에 액세스할 수 없습니다.

라는 제목의 JSON 파일로 스토어를 초기화합니다.config.json:

{
  "branding": {
    "button": {
      "secondary": {
        "background_color": "#EC6B24",
        ...
      },
      ...
    }
  }
}

...내 가게에서 수입하는 것:

import templateConfig from '@/config.json'

export const state = () => ({
  branding: {}
})

export const mutations = {
  setConfig (state, data) {
    state.branding = templateConfig.branding
  }
}

export const actions = {
  initializeStore ({ state, commit }, data) {
    commit('setConfig', data)
  }
}

제 견해로는mounted후크, 스토어 액션을 호출합니다(this.initializeStore()페이지 로드 시 스토어가 입력되도록 합니다.

문제는 뷰의 하위 구성 요소 중 하나에서 다음과 같이 중첩된 속성에 액세스하려고 할 때입니다.

computed: {
  ...mapState({
    bgColor: state => state.template.branding.button.secondary.background_color
  })
}

...이 에러가 표시됩니다.

정의되지 않은 '보조' 속성을 읽을 수 없습니다.

왜요?

편집: 아래는 부모 뷰 컴포넌트의 코드입니다.

import { mapActions } from 'vuex'

export default {
  mounted () {
    this.initializeStore()
  },
  methods: {
    ...mapActions({
      initializeStore: 'initializeStore'
    })
  }
}

이 오류는 해당 시점의 초기 값만 있고 아직 작업이 호출되지 않았음을 의미합니다(자녀가 상태를 매핑한 후 부모가 마운트됨).이 조작은 부모 사이트에서 실행할 수 있습니다.created대신 후크를 끼웁니다.

단, 만약initializeStore초기화 시 콜은 1회뿐이며, 그 액션(및 변환)을 모두 삭제하고, 그 액션(및 변환)을 정의하기만 하면 됩니다.stateImport된 json에서 직접:

import templateConfig from '@/config.json'

export const state = () => ({
  branding: templateConfig.branding
})

액션/변환에서는 payload가 사용되지 않습니다.

데이터를 Import하지 않고 Import하고 있는 경우는, 및/또는 그 양쪽을 참조하는 것을 추천합니다.fetch/asyncData훅을 클릭합니다.

언급URL : https://stackoverflow.com/questions/66528824/cant-access-property-of-vuex-store-object