Vue + Vuex를 사용하여 렌더링하기 전에 개체의 속성을 상태로 가져올 수 없습니다.

Vue + Vuex를 사용하여 렌더링하기 전에 개체의 속성을 상태로 가져올 수 없습니다.

사용자라는 모듈 상태의 데이터라는 개체를 가진 Vuex 스토어가 있습니다.이 오브젝트는 사용자 ID를 사용자에게 매핑하고 빈 상태로 시작합니다.

다음으로 authorId라는 전달된 속성을 가진 메시지컴포넌트를 렌더링하는 메시지리스트 컴포넌트가 있어요이 메시지는 스토어의 데이터 개체를 검색하여 작성자의 이메일을 수신하기 위한 ID를 사용합니다.찾을 수 없는 경우 서버에서 사용자를 가져오는 작업을 디스패치하고 ID와 사용자를 스토어의 데이터 개체에 추가하는 변환을 커밋합니다.현재 모든 메시지는 동일한 authorId를 가지며 서버 가져오기 로직은 예상대로 작동합니다.

사용자 모듈

state: { data: {} },
mutations: {
  setUser(state, user) {
    Vue.set(state.data, user._id, user);
  },
},
actions: {
  fetchUser({ commit }, id) {
    userService.find({ _id: id }).then((response) => {
      commit('setUser', response.data[0]);
    });
  }

메시지 컴포넌트

<template>
<div class="message">
  <strong v-if="author">{{author.email}}</strong>: {{text}}
</div>
</template>

<script>
export default {
  name: 'messages',
  props: ['text', 'authorId'],
  created() {
    this.resolveAuthor();
  },
  computed: {
    author() {
      return this.$store.state.users.data[this.authorId];
    },
  },
  methods: {
    resolveAuthor() {
      if (!this.author) this.$store.dispatch('fetchUser', this.authorId);
  },
};
</script>

예상되는 동작은 첫 번째 메시지컴포넌트 인스턴스가 스토어를 가져와 채워지고 다음 인스턴스는 저장된 값을 사용하기 때문에 setUser 변환이1개만 표시됩니다.메시지마다 1개의 변환이 표시되므로 콜은 이 변환에 해당합니다.created() 또는 mounted()의 작성자는 항상 정의되어 있지 않습니다.스토어가 이미 채워져 있기 때문에 첫 번째 메시지에서는 예상할 수 없지만 다음 메시지에서는 예상할 수 없습니다.

console.log(Object.keys)(이것).$store.state.users.data)는 각 메시지인스턴스의 모든 created() 또는 mounted()에 데이터 객체가 비어 있음을 나타냅니다.단, vue dev-tools에 키(authorId)와 사용자 값이 하나 있고 console.log(이것)를 사용하는 경우에도 확인할 수 있습니다.$store.state.users.data).

또한 템플릿에서 {{this.user}}을(를) 렌더링하면 모든 메시지에 데이터가 올바르게 인쇄됩니다.또한 파일을 다시 저장하면 핫 새로고침으로 모든 console.log(Object.keys)(이것)가 인쇄됩니다.$store.state.users.data)아까도 그랬는데 빈 객체가 아니라 원하는 키와 값을 보여줍니다.

2018-10-24 편집 작업 저장소가 도움이 되었으면 합니다.https://github.com/niklabaz/chatter

레이스 조건이 있는 것 같은데컴포넌트를 루프하여 작성한 후 모든 컴포넌트(메시지)를 작성할 때 msg를 작성한 사용자를 취득할 수 있습니다.첫 번째 컴포넌트를 만들고 데이터 내의 사용자를 검출하지 않기 때문에 취득을 시도합니다만, 그 사용자가 API를 통과하기 전에(몇 밀리초라도 시간이 걸립니다), 다른 컴포넌트와 데이터를 렌더링합니다.사용자는 아직 채워지지 않아 다른 API 요청을 디스패치합니다.vue는 하나의 API 요청이 루프에서 다른 구성 요소를 렌더링하기 위해 데이터를 반환할 때까지 기다리지 않습니다.이것이 맞다면 컴포넌트 구조를 재구성하거나 적어도 다른 방법으로 사용자를 불러와야 합니다.

편집하다

서버측 코드를 수정하여 사용자 오브젝트(또는 적어도 uname과 id)를 모든 메시지오브젝트의 일부로 송신하는 것이 좋습니다.ORM을 사용하지 않더라도 user_id FK가 있는 msg 테이블을 사용자 테이블과 결합할 수 있습니다.그런 다음 이 모든 데이터를 상위 구성요소로 가져와서 메시지를 루프하면 필요한 모든 사용자 정보를 얻을 수 있습니다.

언급URL : https://stackoverflow.com/questions/42320284/cannot-get-object-s-property-in-state-before-render-using-vue-vuex