首页新闻找找看学习计划

组件中获取不到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
请问该怎么解决?

zanetti的主页 zanetti | 初学一级 | 园豆:154
提问于:2018-10-18 20:48
< >
分享
最佳答案
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
心悠魂然 | 老鸟四级 |园豆:2080 | 2018-10-19 11:21

确实是这个原因,但是 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,能实现且更容易。谢谢您的回答~

zanetti | 园豆:154 (初学一级) | 2018-10-19 15:40
其他回答(1)
0

你的loginname未定义,确定不是字段名错了?

徒然喜欢你 | 园豆:1574 (小虾三级) | 2018-10-19 08:40

字段名没错啊,拿到的话题数据是这样写的:

"author":{
        "loginname":"nswbmw",
        "avatar_url":"https://avatars0.githubusercontent.com/u/4279697?v=4&s=120"
    }

而且我在 mutations 里能够打印出用户名

console.log(state.detail.author.loginname);
支持(0) 反对(0) zanetti | 园豆:154 (初学一级) | 2018-10-19 14:02
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册