未定义类型记录错误:无法读取未定义属性
错误消息
当前使用
我在vue中使用类型记录，其中vue项目是使用cli创建的。
问题
我正在尝试读取从firebase实时数据库检索到的对象中的字符串，但在控制台中显示类型错误。
情况
目前，我正在导航栏上工作，试图使文本无错误地显示出来。为此，我将我的所有文本数据存储在一个防火墙实时数据库中。
我有一个本地vuex状态，它应该存储文本数据，一个getter用来检索它，然后一个mutator同步请求从数据库获取数据，并以文本数据的形式存储它。
在我的App.vue文件中，我调用mutator同步请求从数据库获取文本数据并将其存储在状态中。
然后，在我的navigation.vue文件中，我调用文本数据getter，以获取文本数据对象，然后引用我想要的文本。
这很奇怪，因为如果我使用一个按钮来运行一个返回调用文本项'Home‘状态的结果的方法，它将显示正确的字符串。
回答 1
Stack Overflow用户
发布于 2022-08-18 02:09:59
@Dylan模板是在设置getter之前呈现的(这是正常的)。控制台中的错误消息指向问题，它试图读取未定义的.navigation。因此，它基本上是试图读取$store.getters.getTextualData.header.navigation...，但在初始加载时，header还不存在(未定义为错误提及)。
我倾向于解决这个问题，我希望有一个计算属性，一旦字符串可用就返回它，例如
computed: {
homeButtonText() {
return $store.getters.getTextualData?.header?.navigation.text.buttons.home
}
}它将返回未定义的，直到设置好为止。或者，您也可以返回默认设置。
computed: {
homeButtonText() {
return $store.getters.getTextualData?.header?.navigation.text.buttons.home || 'Home'
}
}方法返回正确值的原因是getter有时间设置，因此文本存在。模板呈现很早就会发生。一篇好的文章和图表可以找到这里。
在您的模板中，您可以按以下方式更新它，
<router-link class="nav__a" to="/">
{{ homeButtonText }}
</router-link>https://stackoverflow.com/questions/73395024
复制相似问题
腾讯云开发者
