Vue组件获取Vuex Store数据仅返回默认值问题求助

嘿，我仔细看了你的代码，问题其实出在user.js模块的mutations里的setUserInfo方法上，你的赋值逻辑写错了，导致state.user没有被正确更新成后端返回的用户数据。

核心错误点 #

先看你原来的mutations代码：

mutations: {
  setUserInfo (state, user) {
    state.user = {...state, ...user,};
  },
};

这里你把整个模块的state对象（也就是{ user: {...} }）和传入的user对象做了合并，然后赋值给state.user。这会导致state.user变成一个包含原user属性和新用户数据的混合对象，而不是纯粹的用户信息对象，自然组件里拿到的还是默认结构的旧数据。

修复方案 #

把mutations里的赋值改成正确的方式，直接用传入的user覆盖state.user就好——毕竟你已经在action里做了{...defaults, ...response}的合并，直接赋值最简洁：

mutations: {
  setUserInfo (state, user) {
    state.user = user;
    // 如果后续需要保留原state.user的额外属性（当前场景不需要），可以用下面的写法
    // state.user = { ...state.user, ...user };
  },
};

验证组件访问方式 #

你组件里用mapState或者直接this.$store.state.user的写法都是没问题的，修复mutations之后，就能正确获取到更新后的用户数据了。

关于Getter的补充 #

其实你现在的场景不需要额外写Getter也能解决问题，但如果后续需要对用户数据做格式化、派生操作，使用Getter会更符合Vuex的规范，比如：

const getters = {
  currentUser: (state) => state.user,
  isRegistered: (state) => state.user.registered,
};

然后在组件里用mapGetters访问：

import { mapGetters } from 'vuex';
export default {
  computed: {
    ...mapGetters('user', ['currentUser', 'isRegistered']),
  }
};

内容的提问来源于stack exchange，提问作者tx291