我有以下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"
但奇怪的是用户名字正确显示。我做错了什么?
答案 0 :(得分:14)
您最有可能收到该错误,因为您的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.first_name
,直到user
设置正确。
答案 1 :(得分:0)
对我有用的解决方案是将用户设置为空字符串' '
而不是null。
const state = {
user: ''
}
答案 2 :(得分:-1)
Flux