Vuex에서 업로드된 데이터를 어떻게 대기합니까?

Vuex에서 업로드된 데이터를 어떻게 대기합니까?

Vuex 스토리지에서 '사용자'를 저장(obj가 서버에서 업로드됨)

작성 섹션의 메인 App.vue에 항상 'user'를 입력합니다.

비동기 방식입니다.내 컴포넌트는 기다리지 않는다.템플릿 {{user.logo}}에서 사용할 때 콘솔 404에서 오류가 발생함

http://example.net/images/undefined

그러나 다음 초에는 사용자가 업로드하면 오류가 사라집니다.

Vuex에서 앱이 업로드된 비동기 날짜를 대기하도록 설정하는 방법

---

갱신되었습니다.나는 왜 이런 일이 일어나는지 이해한다.컴포넌트가 마운트되어 비동기 데이터가 준비되지 않았습니다.Vuex에서 상태를 'ready'로 하면 업로드 성공 후 True가 됩니다.계산 섹션에서 'ready'를 체크합니다.준비되지 않으면 no_logo.png가 반환됩니다.

단, 컴포넌트의 created 섹션에서 Vuex 스토어에서 'user.id'을 사용하여 서버에서 다른 데이터를 가져오면(사용자는 아직 준비가 되지 않았습니다) 오류가 발생합니다.가져오기 전에 생성된 섹션에서 'ready'를 어떻게 확인하시겠습니까?

//html
<div id='app'>

  <ul>
    <li v-for='role in roles'>
      <p>{{role}}</p>
    </li>
  </ul>


</div>

//script Vue
var app = new Vue({
  el: '#app',
  data: {
    roles: []
  },

  created: {
    this.fetchingItems() //GOT ERROR need check Ready!!!
  },

  methods: {
    fetchingItems() {
      axios.get('api/getRoles/${this.$store.user.id}')
        .then((res) => this.roles = res.data.roles)
    }
  }
})


// This is store!!!.
const store = new Vuex.Store({
  state: {
    ready: false,
    user: {}
  },
  mutations: {
    USER_SET(state, user) {
        state.user = user
      },
      READY_SET(state) {
        state.ready = true
      }

  },
  action: {
    loadUser() {

  axios.get('api/getUser/${parseInt(localStorage.getItem('user_id'))}')
      commit('USER_SET', res.data.user)
      commit('READY_SET')

    }
  }
})

이는 컴포넌트가 마운트될 때 사용자 정보가 존재하지 않기 때문에 발생하지만 최종적으로는 사용자 정보가 존재하기 때문입니다.

이 이미지에서는 Backend API에 데이터를 요청하고 스토어에 커밋하는 디스패치 및 액션을 수행합니다.

커밋할 때까지 컴포넌트의 모든 것이 실제 데이터로 채워지지 않습니다.

당신이 해야 할 일은,v-if컴포넌트를 표시할지 여부를 지정합니다.

다른 방법은 다음과 같이 모든 데이터가 로드될 때까지 오버레이를 표시하는 것입니다.

내가 고쳤어!

시계를 사용하다

watch: {
        ready: function () {
            this.fetchingItems()
        }
    },

언급URL : https://stackoverflow.com/questions/44861125/how-await-uploaded-data-from-vuex