组件中获取不到vuex里的数据，怎么解决？
0
悬赏园豆：5
[已解决问题]
解决于 2018-10-19 15:41
问题描述
我在做 cnodejs 的话题展示页，cnode-article-vx.vue 和 author.vue 有共同的父组件 detail.vue，cnode-article-vx.vue 中通知 vuex 发请求拿到话题数据，保存在 vuex 里。
author.vue 中，我想拿到 vuex 存的话题数据中的作者，再发请求获取用户数据。但是我在获取作者时报错了。
相关代码
cnode-article-vx.vue
methods: {
//通知 vuex 获取文章细览及向上传递作者名、回复
getDetailVuex(){
this.$store.commit('showSpinMu', {show: true});
let id = this.$route.params.id;
let accesstoken = Cookies.get('accesstoken');
if(accesstoken){
//登录了
this.$store.dispatch('getDetailAc', {id, accesstoken});
}else{
//没登录
this.$store.dispatch('getDetailAc', {id});
}
}}
vuex
actions: {
//获取文章细览
getDetailAc(store, payload) {
let accesstoken = payload.accesstoken ? payload.accesstoken : '';
return getDetail(payload.id, { accesstoken }).then(({ data }) => {
store.commit('detailMu', { detail: data.data });
});
}},
mutations: {
//文章细览
detailMu(state, payload) {
state.detail = payload.detail;
state.spinShow = false;
console.log(state.detail.author.loginname);
}
}
author.vue
computed: {
//从 vuex 获取作者名
authorName(){
return this.$store.state.detail.author.loginname;
}
}
你期待的结果是什么？实际看到的错误信息又是什么？
在 vuex 中能够打印出 loginname，author.vue 报的错误如下：
Uncaught (in promise) TypeError: Cannot read property 'loginname' of undefined
请问该怎么解决？
最佳答案
0
子组件计算属性会先执行，当时你的state.detial还没有被赋值，也就是说还不具有author或者loginname属性，
所以你要在authorName中return之前，执行一次commit赋值；如：
computed: {
//从 vuex 获取作者名
authorName(){
this.$store.commit('detailMu',{detial:{author:{loginname:"456"}}});
return this.$store.state.detail.author.loginname;
}
}
收获园豆：5
确实是这个原因，但是 loginname 是 cnode-article-vx.vue 通知 vuex 发请求获取到的。我在 cnode-article-vx.vue 的计算属性里获取 vuex 里的 loginname，再向上传递到 detail.vue，再向下传递给 author.vue，再按照您说的先 commit，也会报错。
感觉这种情况用 vuex 好像不适合，后来我直接在 cnode-article-vx.vue 发请求获取话题数据，再将 loginname 通过组件传递到 author.vue，能实现且更容易。谢谢您的回答~
其他回答(1)
0
你的loginname未定义，确定不是字段名错了？
字段名没错啊，拿到的话题数据是这样写的：
"author":{
"loginname":"nswbmw",
"avatar_url":"https://avatars0.githubusercontent.com/u/4279697?v=4&s=120"
}而且我在 mutations 里能够打印出用户名
console.log(state.detail.author.loginname);