Vue가 vuex에서 가져오는 내 개체의 업데이트를 보지 못함

Vue가 vuex에서 가져오는 내 개체의 업데이트를 보지 못함

vuex에 getter를 통해 페이지에 액세스하는 개체가 있지만 vue에는 개체의 첫 번째 업데이트만 표시됩니다.오브젝트를 단계별로 수집하기 때문에 우선 오브젝트가 비어 있는 경우 vuex 상태(setUser)를 업데이트하고 페이지에 이 새로운 정보를 표시하도록 커밋합니다.그러나 커밋(addInfo)을 하나 더 사용하면 Vue DevTools를 사용하여 업데이트된 정보를 볼 수 있지만 두 번째 상태가 표시된 페이지에서 사용할 수 없습니다.

async fetchUser({ commit, state }) {
  return new Promise(() => {
    axiosInstance
      .get(User(), {
        headers: {
          Authorization: 'Token ' + localStorage.getItem('token'),
        },
      })
      .then((res) => {
        commit('setUser', res.data);
      })
      .then(() => {
        axiosInstance.get(UserID(state.userInfo.pk)).then((res) => {
          axiosInstance.get(res.data.profile).then((res) => {
            commit('addInfo', res.data);
            console.log(state.userInfo);
          });
        });
      })
      .catch((err) => {
        console.log(err);
      });
  });
}

userInfo라는 오브젝트가 페이지에 접속하고 있습니다.

computed: {
    ...mapGetters(['userInfo']),
},
created() {
    this.$store.dispatch('fetchUser');
}

이 페이지에 있는 건 이거야

이 물체는 실제로 이렇게 보입니다.

이는 일반적인 반응성 문제이며 익숙해질 수 있는 여러 가지 솔루션이 있습니다.

기본적으로 Vue는 JS 제한으로 인해 개체에 대한 속성 추가를 감지할 수 없습니다. 초기 문제를 해결하기 위해state.userInfo리액티브하게 하고 싶은 모든 키를 가질 수 있도록 설정하기만 하면 됩니다.null,'', 또는0종류에 따라 다릅니다.

userInfo: {
//all my userInfo reactive keys
 1stkey: '',
 2ndkey: null,
 3rdkey: 0,
 ...
 100thkey: '',
}

또, 다음의 설정을 실시할 수도 있습니다.state.userInfo = null채워진 시간을 감지할 수 있도록 처음에 null로 설정합니다.

Vue 문서에서 Vue Reactivity에 대한 자세한 내용은 여기를 참조하십시오.

언급URL : https://stackoverflow.com/questions/68762444/vue-doesnt-see-updates-of-my-object-getting-from-vuex