[Vue 警告]：渲染函数中的错误：“TypeError：无法读取属性 'first_name' of null”答案

【问题标题】：[Vue warn]: Error in render function: "TypeError: Cannot read property 'first_name' of null"[Vue 警告]：渲染函数中的错误：“TypeError：无法读取属性 'first_name' of null”
【发布时间】：2017-10-23 20:15:59
【问题描述】：

我有以下Navigation.vue 组件：

<template>
  <div>
    {{user.first_name}}
  </div>
</template>

<script>
  import { mapActions, mapGetters } from 'vuex'

  export default {
    name: 'hello',
    methods: {
      ...mapActions(['myAccount'])
    },

    mounted: function () {
      if (localStorage.getItem('access_token')) {
        this.myAccount()
      }
    },

    computed: {
      ...mapGetters(['user'])
    }
  }
</script>

此代码返回：

[Vue warn]: Error in render function: "TypeError: Cannot read property 'first_name' of null"

但奇怪的是用户名显示正确。我做错了什么？

【问题讨论】：

我假设这是因为，在您的 vuex 存储中，user 的状态被初始化为null。只需将user 初始化为一个空对象{}。
添加您的评论作为答案，我会接受。

标签： javascript vue.js vuex

【解决方案1】：

您很可能会收到该错误，因为您的 Vuex 商店中的 user 最初设置为 null。映射到 Vue 组件的 user getter 在对 Vuex 存储进行一些初始化之前返回该 null 值，从而正确设置 user。

您最初可以将user 设置为空对象{}。这样，您的 Vue 组件模板中的user.first_name 将是undefined，并且模板中不会呈现任何内容。

或者，您可以将v-if="user" 属性添加到包含div 元素：

<div v-if="user">
  {{ user.first_name }}
</div>

这样，div 及其内容将不会被渲染，直到映射的 user 属性的值是真实的。这将阻止 Vue 在正确设置 user 之前尝试访问 user.first_name。

【讨论】：

【解决方案2】：

对我有用的解决方案是将用户设置为空字符串 ' ' 而不是 null。

const state = {
    user: ''
}

【讨论】：

【解决方案3】：

beforeMount(){
 if (localStorage.getItem('access_token')) {
        this.myAccount()
   }
}

【讨论】：

欢迎来到 Stack Overflow。请用英文写下你的答案，因为 Stack Overflow 是English only site。