Question

我正在使用vuejs，vuex和vuetify。

涉及3个文件，我将发布重要部分。

基本上我想显示与route参数相对应的数据。每当我在Product.vue中使用以下内容时

<h1 class="heading primary--text"> {{ product.partNumber }}</h1>

该文件上没有任何内容，当我检查控制台时，得到以下信息...

Chrome浏览器：“ TypeError：无法读取未定义的属性'find'”

Firefox：[Vue警告]：渲染错误：“ TypeError：state.loadedProducts未定义”

在同一项目中，我制作了一个vue页面，该页面使用v-for和其中一个getter加载了页面上的所有产品，就很好了。

我真的不确定出什么问题，请在我的发际线消失之前帮忙。

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

<script>
export default {
  name: 'Product',
  props: ['id'],
  computed: {
    product () {
      return this.$store.getters.loadedProduct(this.id)
    }
  }
}
</script>

Answer 1

与其尝试通过loadedProducts访问store，而是通过吸气剂本身访问它。 getters上的文档提供了一个通过第二个参数访问getter中其他getter的示例。

Getters也将获得其他getter作为第二个参数

loadedProduct (state, getters) {
  return (productId) => {
    return getters.loadedProducts.find((product) => {
      return product.partNumber === productId
    })
  }
}

确保为商店属性设置合理的默认值，例如products的空数组。

希望有帮助！

我在vuex store.js中创建的吸气剂出现错误

1 个答案: