[英]Vue doesn't see updates of my object getting from vuex
我在 vuex 中有一个对象,我通过 getter 进入页面,但 vue 只看到对象的第一次更新。 我逐步收集对象,所以首先它是空的,然后我提交更新 vuex 状态(setUser)和 vue 在页面上显示这个新信息。 但后来我又使用了一个提交(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');
}
这就是我在页面上得到的
这就是对象的真实样子
这是一个常见的反应性问题,有多种解决方案你会习惯的:
基本上,由于 JS 的限制,Vue 无法检测对象上的属性添加,要解决它,您的初始state.userInfo
应该具有您想要具有反应性的所有键,您可以根据类型将它们设置为null
、 ''
或0
。
userInfo: {
//all my userInfo reactive keys
1stkey: '',
2ndkey: null,
3rdkey: 0,
...
100thkey: '',
}
您还可以将state.userInfo = null
最初设置为 null,以便您可以检测到它何时被填充。
在此处查看有关 Vue 文档上的 Vue Reactivity的更多信息
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.