javascript - 在第一页加载 Vue.js 时无法访问数据

Question

我有一个组件，里面有一个 img 用于显示个人资料图片我把它放在我的 html 中:

<img v-bind:src="this.profileSrc"/>

在我的计算属性中，我有这样的profileSrc方法:

profileSrc(){
      const that = this;
      console.log(that);
      return `${variables.BASE_URI}/file/thumbnail/${that.$store.getters[types.AUTH_GET_USER].picture.id}`
    }

从第二页加载开始效果很好，但在第一次加载时，它崩溃了:Cannot read property 'picture' of null，这意味着它第一次不识别这个变量。但是当我改变页面并再次返回我的页面时它的工作。为什么 ？谢谢:))

Answer 1

检查计算属性中是否存在图片:

profileSrc() {
  const that = this;
  if (that.$store.getters[types.AUTH_GET_USER].picture) {
    return `${variables.BASE_URI}/file/thumbnail/${
      that.$store.getters[types.AUTH_GET_USER].picture.id
    }`;
  }
}

一旦 picture 可用于组件，计算属性就会“执行”。