我有一个使用vex存储站点范围数据的vue应用程序我获取用户信息并将其置于创建生命周期方法之前的状态,如下所示:
const app = new Vue({
el: '#app',
store,
beforeCreate(){
store.dispatch('currentUser');
}
});
在我的用户模块中,我有一个获取用户名的getter,如下所示:
const getters = {
getName(state){
return state.user.name;
}
};
在我的组件中,我试图访问getter以显示组件中用户的名称 . 当我查看Vue Chrome开发工具时,getter不是未定义的,但是当我控制日志时,getter结果就像是未定义的那样 .
mounted(){
console.log(store.getters.getName);
},
在加载状态之前,组件似乎正在加载 . 我正在使用axios获取用户信息 . 我真的很困惑如何解决这个问题,因为我无法在我知道的情况下尽快调用动作来获取用户数据 .
如果在我的getter方法中我做:
state.user
我明白了:
{ "id": 1, "name": "Test" }
但是当我试图得到名字时,我得到了不确定
这是商店:
import axios from "axios/index";
const state = {
user: {},
};
const mutations = {
FETCH_USER(state,user){
state.user = user;
},
UPDATE_AVATAR(state,avatar){
state.user.avatar = avatar;
}
};
const getters = {
getName(state){
return state.user.name
},
avatar(state){
return state.user.avatar;
},
userSocialNetworks(state){
//return state.user.social_networks
},
schoolName(state){
return state.user.school
},
schoolAbout(state){
return state.user.school.about
},
schoolAddress(state){
return state.user.school.address
}
};
const actions = {
currentUser: ({commit}) => {
axios.get('/api/user').then(response => {
commit('FETCH_USER', response.data);
});
}
}
export default {
state,
getters,
actions,
mutations
}
{"user":{"user":{"name":"Test","email":"test@test.edu","avatar":"http://www.gravatar.com/avatar/xxxx=300","city":null,"state":null,"zip":null,"address":null,"lat":null,"long":null,"role":"school","school":{"id":1,"about":null,"header":null,"name":"Test","user_id":1,"created_at":"2018-06-06 19:48:16","updated_at":"2018-06-06 19:48:16"},"following":[],"followers":[],"social_networks":[{"id":4,"user_id":1,"social_network_id":1,"network_url":"test.com/k","created_at":"2018-06-06 23:11:09","updated_at":"2018-06-06 23:15:19"},{"id":5,"user_id":1,"social_network_id":2,"network_url":"test.com/k","created_at":"2018-06-06 23:15:19","updated_at":"2018-06-06 23:15:19"},{"id":6,"user_id":1,"social_network_id":5,"network_url":"test.com/k","created_at":"2018-06-06 23:16:15","updated_at":"2018-06-06 23:16:15"}]}},"socialNetowrks":{"available_networks":[{"id":1,"network_name":"Facebook","created_at":null,"updated_at":null},{"id":2,"network_name":"Instagram","created_at":null,"updated_at":null},{"id":5,"network_name":"Twitter","created_at":null,"updated_at":null}]}}
1 回答
首先,方法尚未在
beforeCreate
hook中初始化 . 最简单的方法是使用created
钩子:在您的组件中