Vue.js/Vuex: Getter 호출과 라이프 사이클 생성 후 직접 상태 값에 액세스

Vue.js/Vuex: Getter 호출과 라이프 사이클 생성 후 직접 상태 값에 액세스

vue.js에서 생성된 라이프 사이클 훅을 사용하여 저장소의 데이터를 vue 컴포넌트의 데이터로 로드하고 있습니다.나는 그것을 알아챘다.this.selectedType = store.state.selectedType저장소에서 데이터를 로드했습니다.단, Getter를 사용하여 스토어에서 로드하는 경우(즉,this.selectedType = store.getters.getType()), 다음의 에러가 표시됩니다.

Error in created hook: "TypeError: Cannot read property 'selectedType' of undefined"

나는 왜 그렇게 선택되었다고 말하는지 이해할 수 없다.유형이 정의되지 않은 이유:selectedType가치가 있다"Item"스토어에 저장되며 생성 시 올바르게 로드됩니다.this.selectedType = store.state.selectedType.

getter는 다음과 같이 정의됩니다.

getters: {
    getSelectedType: state => {
      return state.selectedType
    }
}

상태는 다음과 같이 정의됩니다.

state: {
  selectedType: "Item"
}

왜 이런 일이 일어나는지 설명해 주실 수 있나요?내 예감으로는 라이프 사이클에 대해 내가 완전히 이해하지 못하는 무언가가 이 혼란으로 이어지고 있다.

당신은 게터에게 전화해서는 안 됩니다.계산된 속성과 마찬가지로 변수를 읽는 것처럼 대신 씁니다.백그라운드에서 Vuex 스토어에서 정의한 함수는 state, getters(및 rootState 및 rootGetters)와 함께 호출되어 몇 가지 값을 반환합니다.

또한 라이프 사이클 후크를 사용하여 변수를 초기화하는 것은 일반적으로 안티 패턴입니다.로컬 '컴포넌트' 변수는datavuex 상태와 같은 것은 대개 계산된 속성으로 끝납니다.

마지막으로 지적하고 싶은 것은 스토어를 Vue 어플리케이션에 올바르게 추가한 경우 다음 컴포넌트를 사용하여 스토어에 액세스할 수 있다는 것입니다.this.$store어플리케이션에서 getters를 사용하려면mapGettersgetter를 컴포넌트 속성에 매핑하는 도우미입니다.다음과 같은 것을 사용할 것을 권장합니다.

import { mapGetters } from 'vuex';

export default {
  // Omitted some things here

  computed: {
    ...mapGetters({
      selectedType: 'getSelectedType'
    })
  },

  methods: {
    doSomething () {
      console.log(this.selectedType);
    }
  }
}

즉, 기능적으로는 다음과 같습니다.

computed: {
  selectedType () {
    return this.$store.getters.getSelectedType;
  }
}

언급URL : https://stackoverflow.com/questions/53442505/vue-js-vuex-calling-getter-vs-accessing-state-value-directly-on-create-lifecycl