구성 요소에서 내 스토어 개체에 액세스할 수 없음

구성 요소에서 내 스토어 개체에 액세스할 수 없음

내 스토어 모듈/store/template.js다음과 같은 것이 있습니다.

const templateConfig = {
  branding: {
    button: {
      secondary: {
        background_color: '#603314',
        background_image: ''
      }
    }
  }
}

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

export const actions = {
  initializeStore (state) {
    state.branding = templateConfig.branding
  }
}

(initializeStore()앱이 처음 로드될 때 호출됩니다.)

브랜딩을 취득하고 싶다.branding내 컴포넌트의 오브젝트:

computed: {
  ...mapState({
    branding: state => state.template.branding
  })
}

하지만 하려고 하면console.log() branding다음과 같이 표시됩니다.

왜 나는 단순히 내가 볼 수 없을까?branding오브젝트?(도대체 이건 뭐죠?)

상태를 변경하려면 항상 변환을 사용해야 합니다.액션에서 호출할 수 있습니다.

export const mutations = {
  SET_BRANDING(state, payload) {
    state.branding = payload;
  }
}
export const actions = {
  initializeStore ({ commit }) {
    commit('SET_BRANDING', templateConfig.branding);
  }
}

---

관찰자와 함께 보이는 건 정상이고, 그 결과,branding개체가 성공적으로 매핑되고 액세스되었습니다.

보시는 것은 Vue의 객체이며, 이것이 Vue가 반응성을 구현하는 방법입니다.이것이 없으면 반응성이 없으며 모든 최상위 반응형 개체에서 이러한 래퍼를 볼 수 있습니다.없는 척 해도 돼요.

Vue는 실제로 이 "랩퍼"를data관찰할 수 있도록 내부적으로 객체화:

내부적으로 Vue는 데이터 함수에 의해 반환되는 개체에 이 기능을 사용합니다.

다른 반응형 속성에서는 볼 수 없지만 반응형 속성이면 상위 관찰 가능한 개체에 속합니다.

---

할 필요가 있다import { mapState, mapActions } from 'vuex'(이미 끝난 것 같은데)

그리고 이 글을 쓸 수 있습니다.

...mapState(['branding']) // or ...mapState('@namespacedModule', ['branding'])

그래도, 당신은 왜 단순히 국가를 직접 (당신이 가지고 있는)background_colorVuex 액션을 거치지 않고?

이렇게 하고 싶다면 잊지 말고await this.initializeStore()컴포넌트 내의 컴포넌트레이닝 해 주세요.

언급URL : https://stackoverflow.com/questions/66518235/cant-access-my-store-object-from-my-component