Vue 看不到我的对象从 vuex 获取的更新

Question

我在 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');
}

这是我在页面上看到的内容

这就是对象的真实样子

Answer 1

这是一个常见的反应性问题，有多种解决方案，您会习惯的：

由于 JS 的限制，Vue 基本上无法检测到对象上的属性添加，要解决这个问题，您的初始 state.userInfo 应该具有您想要具有反应性的所有键，您可以将它们设置为 null、'' 或 0，具体取决于类型。

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

您还可以将 state.userInfo = null 初始设置为 null，这样您就可以检测它何时被填充。

在此处查看 Vue Reactivity on Vue docs

的更多信息

Vue 看不到我的对象从 vuex 获取的更新

Vue doesn't see updates of my object getting from vuex

javascript

getter

single-page-application

vue.js

vuex