Vue.js 在组件中使用存储数据会拉入默认值，而不是更新的值

我是Vue新手，正在尝试使用组件中存储的数据。该数据在应用程序加载时设置，我已确认设置正确

但是，当我尝试从组件中的存储访问此数据时（我使用的是mapState），我得到的只是存储的默认值，而不是设置的数据

我正在尝试访问的商店是：

       //user.js 
      const defaults = {
        emailAddress: '',
        gender: 'N/A',
        registered: false,
        userName: '',
      };

    const state = {
      user: { ...defaults, },
    };

    const getters = {};

    const actions = {
      login ({ commit, }) {
        api.post(/loginurl).then((response) => {
          commit('setUserInfo', { ...defaults, ...response, });
        });
      },
    };

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

    const user = {
      namespaced: true,
      state,
      getters,
      actions,
      mutations,
    };
    export default user;

我已经确认在setUserInfo中正确设置了所有数据

但是，当我在这样一个组件中访问它时：

<template>
 <div class="user-info">
    <p> {{ user }} </p>
 </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState('user', { user: (state) => state.user, },),
  }
};
</script>

也将只返回默认值

---

我是否需要在存储中设置一个getter，然后在我的组件中使用它？任何帮助都将不胜感激

非常奇怪。。。尝试，而不是mapState，使用MapGetter并为您需要的内容编写getter。如果我使用getter，会发生同样的事情…它返回默认值。如果出于某种原因将此“state.user={…state，…user，}；”更改为此“state.user={…user}；”会发生同样的问题。真奇怪。在主页上正确设置用户信息。但是，当我导航到另一个页面（使用该组件的页面）时，任何访问该状态的尝试都会给出默认值。我不确定您的情况会发生什么，但我建议使用Vue devtools for Chrome。在那里，您可以看到商店中所做的所有更改的列表，这将帮助您查找问题。

userInfo () {
  return this.$store.state.user;
},