Question

我是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>

在我的模板中打印出用户的所有默认值，而不是在'setUserInfo中设置的值。

我还将添加，如果我只是尝试直接通过计算属性访问此属性，那么我还将获得默认值。例如：

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

还将只返回默认值。

我是否需要在商店中设置吸气剂，然后在组件中使用它？任何帮助将不胜感激！！！

在Component中使用存储数据会拉入默认值，而不是更新的默认值

0 个答案: