组件中获取不到vuex里的数据，怎么解决？

Question

问题描述

我在做 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
请问该怎么解决？

Answer 1

子组件计算属性会先执行，当时 state.detail 还没有被赋值，也就是说还不具有 author 或者 loginname 属性，所以要在 authorName 中 return 之前，执行一次 commit 赋值；如：

computed: {
  //从 vuex 获取作者名
  authorName(){
    this.$store.commit('detailMu',{detial:{author:{loginname:"456"}}});
    return this.$store.state.detail.author.loginname;
  }
}