Я новичок в 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;
},
также будет просто возвращать значения по умолчанию.
Нужно ли мне устанавливать геттер в хранилище, а затем просто использовать его в моем компоненте? Любая помощь будет высоко ценится !!!