问题描述
限时送ChatGPT账号..我正在使用 vuejs、vuex 和 vuetify.
I am using vuejs, vuex, and vuetify.
涉及到3个文件,我把重要的部分贴出来.
There are 3 files involved I will post the important parts.
基本上我想显示与路由参数对应的数据.每当我在我的 Product.vue 中使用以下内容
Basically I want to display data corresponding to the route parameter. Whenever I use the following in my Product.vue
<h1 class="heading primary--text"> {{ product.partNumber }}</h1>
该文件上没有任何内容加载,当我检查控制台时,我得到以下信息...
Nothing on that file loads, and when I check the console I get the following...
Chrome:类型错误:无法读取未定义的属性‘查找’"
Chrome: "TypeError: Cannot read property 'find' of undefined"
Firefox:[Vue 警告]:渲染错误:TypeError:state.loadedProducts 未定义"
Firefox: [Vue warn]: Error in render: "TypeError: state.loadedProducts is undefined"
在同一个项目中,我制作了一个 vue 页面,使用 v-for 加载页面上的所有产品,还有一个 getter,就好了.
In this same project I made a vue page that loads all the products on the page using v-for, and one of the getters, just fine.
我真的不确定出了什么问题,请在我的发际线消失之前帮助.
I am really unsure what is wrong, please help before my hairline disappears.
store.js
getters:{
loadedProducts (state) {
return state.products.sort((productA, productB) => {
return productA.partNumber > productB.partNumber
})
},
loadedProduct (state) {
return (productId) => {
return state.loadedProducts.find((product) => {
return product.partNumber === productId
})
}
}
}
router.js
{
path: '/product/:id',
name: 'Product',
props: true,
component: Product
}
Product.vue
Product.vue
<script>
export default {
name: 'Product',
props: ['id'],
computed: {
product () {
return this.$store.getters.loadedProduct(this.id)
}
}
}
</script>
推荐答案
不要尝试通过 store
访问 loadedProducts
,而是通过 getter 本身访问它.getters 上的文档提供了访问其他 getter 的示例通过第二个参数的吸气剂.
Instead of attempting to access the loadedProducts
via store
, instead access it through the getters themselves. The docs on getters provide an example of accessing other getters within a getter via the second argument.
Getter 也会接收其他 getter 作为第二个参数
Getters will also receive other getters as the 2nd argument
loadedProduct (state, getters) {
return (productId) => {
return getters.loadedProducts.find((product) => {
return product.partNumber === productId
})
}
}
确保为商店属性设置合理的默认值,例如 products
的空数组.
Be sure you are setting reasonable defaults for your store properties such as an empty array for products
.
希望有帮助!
这篇关于我在 vuex store.js 中创建的 getter 出现错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论