Vue 구성 요소의 mounted()에 있는 상태 개체에 액세스하려고 합니다.

Vue 구성 요소의 mounted()에 있는 상태 개체에 액세스하려고 합니다.

사용자 ID를 보유하고 있는 Vuex 상태.내 컴포넌트의mounted()그 사용자 ID를 사용하려고 하는데 항상null.

계산한 상태에서 상태를 가져오려면 어떻게 해야 합니까?mapGetters내 안에mounted()?

여기 있습니다.computed:

computed: {
  ...mapGetters('auth', [
    'userid'
  ])
}

그리고 여기 내 것이 있다.mounted():

mounted () {
  HTTP.get('account/' + this.userid + '/')
      .then((response) => {
        this.account = response.data
      })
}

그this.userid항상 있다null.

그런데 내가 Vue 검사관을 봤을 때auth/useridgetter에 올바른 값이 있습니다.auth/userid에 접속하려면auth.userid부터mounted()?

userid컴포넌트를 마운트할 때 를 사용하지 못할 수 있습니다.보고 고칠 수 있어요.useridHTTP 요구를 호출하는 것은 다음과 같습니다.userid가 변경되어 사용할 수 있습니다.

computed: {
  ...mapGetters('auth', [
    'userid'
  ])
},
watch: {
  'userid': {
    handler (newVal) {
      if (newVal) { // check if userid is available
        this.getAccountInformation()
      }
    },
    immediate: true // make this watch function is called when component created
  }
},
methods: {
  getAccountInformation () {
    HTTP.get('account/' + this.userid + '/')
        .then((response) => {
          this.account = response.data
        })
  }
}

디버깅

이것을 디버깅 하려면 , 우선,mapGetters, 이마저도getters상태를 직접 반환합니다.

예를들면.

computed:{
   userId() { return this.$store.state.auth.userid }
}

매장이나 모듈이 어떻게 설정되어 있는지 모르기 때문에 조금 변경해야 할 수도 있습니다.

이 기능이 작동하면 Getter에 추가하여this.$store.getters.userid또는 기타 등등.

마지막으로, 이것이 작동하면 원래의 mapGetters를 사용해보고 모듈 에일리어스를 재확인합니다.

비동기 문제 가능성

다른 한편으로, 만약 당신의 getter가asyncuserid 약속이 해결되기 전에 null도 얻을 수 있습니다.asyncCalculated를 사용하거나 마운트된 결과를 기다려야 합니다.

언급URL : https://stackoverflow.com/questions/54729286/trying-to-access-a-state-object-in-mounted-in-my-vue-component