我一直在使用 Vue、Vuex 和 Vue-Router 处理一个问题。我正在构建一个闪存卡应用程序,在主应用程序创建时获取所有卡片,然后使用 Vuex getter 通过其作为路由参数传递的 id 获取每张卡片。
相关位:
应用程序视图
export default {
components: {
'app-header': header,
},
data() {
return {
}
},
created() {
this.$store.dispatch('getAllCards');
}
}
这dispatch('getAllCards')
只是从数据库中提取所有卡片并提交给 Vuex store.js
。
现在我设置了一个getter
:
getters: {
cardById: (state) => (id) => {
return state.allCards.find((card) => card._id === id);
}
}
这是Card.vue
:
<template>
<div>
<br>
<div v-if="flipped" class="container">
<div class="box">
<pre v-if="card.code"><code class="preserve-ws">{{card.back}}</code></pre>
<p class="preserve-ws center-vertical" v-else>{{card.back}}</p>
</div>
</div>
<div v-else class="container">
<div class="box">
<h1 class="title has-text-centered center-vertical is-2">{{card.front}}</h1>
</div>
</div>
</template>
<script>
export default {
data() {
return {
card: {},
flipped: false,
general_card: false,
code_card: true,
random_card: false
}
},
computed: {
},
methods: {
},
created() {
this.card = this.$store.getters.cardById(this.$route.params.id);
}
}
</script>
我在标题中引用了 TypeError。我的理解是created()
钩子在data()
设置之后发生,所以我可以{card}
使用 getter进行分配。不幸的是,这没有显示任何内容......
如果我分配card()
为计算属性:
computed: {
card() {
return this.$store.getters.cardById(this.$route.params.id);
}
}
该卡显示,但我仍然在控制台中收到该错误。知道为什么吗?我看着这个并尝试了该解决方案,但无济于事。
这个问题没有得到正确答案的所有前提。(我们不知道突变,状态,也不知道动作,我们也没有关于 app-header 组件的线索)所以我们不得不承认一些假设:
state.allCards
Array
挂载组件时为空getAllCards
是一个异步函数,用于检索或设置state.allCards
突变cardById
的 getter,返回一个函数,所以 vuex 不能在函数上应用反应式。因此,如果状态发生变化,则不会正确触发 getter。要纠正此问题,请使用computed
您在此处提及的内容。
但它并没有修复undefined error
,从我的角度来看,这是因为 getterundefined
在安装时返回。
getters: {
cardById: (state) => (id) => {
var card = state.allCards.find((card) => card._id === id);
if(card) {
return card;
}
// on undefined return a default value
return {
front:'default value'
};
}
}
你可以在这个jsfiddle上看到实现,控制台上没有错误。
或者,您可以为卡片组件设置未定义值的加载状态。
如果我的假设是错误的,请提供一个 jsfiddle 来帮助你。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句