我在 vuex store.js 中制作的 getter 出现错误答案

【问题标题】：A getter I made in vuex store.js is getting errors我在 vuex store.js 中制作的 getter 出现错误
【发布时间】：2019-05-28 07:32:49
【问题描述】：

我正在使用 vuejs、vuex 和 vuetify。

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

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

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

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

Chrome：“TypeError：无法读取未定义的属性‘find’”

Firefox：[Vue 警告]：渲染错误：“TypeError: state.loadedProducts is undefined”

在同一个项目中，我制作了一个 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
        })
      }
    }
  }

路由器.js

 {
  path: '/product/:id',
  name: 'Product',
  props: true,
  component: Product
  }

产品.vue

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

【问题讨论】：

标签： javascript vue.js vuex vuetify.js

【解决方案1】：

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

Getter 还将接收其他 getter 作为第二个参数

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

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

希望对您有所帮助！

【讨论】：