Получатель, который я сделал в vuex store.js, получает ошибки - PullRequest
Новая
       5

Получатель, который я сделал в vuex store.js, получает ошибки

0 голосов
/ 01 января 2019

Я использую vuejs, vuex и vuetify.

В нем участвуют 3 файла. Я опубликую важные части.

В основном я хочу отобразить данные, соответствующие параметру маршрута.Всякий раз, когда я использую следующее в моем Product.vue 

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

Ничего в этом файле не загружается, и когда я проверяю консоль, я получаю следующее ...

Chrome: "TypeError: Cannotпрочитать свойство 'find' of undefined "

Firefox: [Vue warn]: ошибка рендеринга:" TypeError: state.loadedProducts is undefined "

В этом же проекте я создал страницу vue, котораязагружает все продукты на странице, используя v-for, и один из получателей, просто отлично.

Я действительно не уверен, что не так, пожалуйста, помогите, прежде чем моя линия волос исчезнет.

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>

1 Ответ

0 голосов
/ 01 января 2019

Вместо того, чтобы пытаться получить доступ к loadedProducts через store, вместо этого обращайтесь к нему через сами получатели.Документы по получателям предоставляют пример доступа к другим получателям в получателе через второй аргумент.

Получатели также получат другие получатели в качестве 2-го аргумента 

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

Убедитесь, что вы устанавливаете разумные значения по умолчанию для своих свойств магазина, например, пустой массив для products.

Надеюсь, это поможет!

...