Vue: Не работает геттер с find во vuex

297
17 августа 2021, 06:00

Всем привет, просто тренируюсь во vue. Столкнулся со странным поведением геттера во vuex - если применить в нём метод find для массива, код отказывается работать.

Итак, вот мой модуль products.js из Vuex:

export default {
  namespaced: true,
  state: {
    items: getProducts()
  },
  getters: {
    items(state){
      return state.items;
    },
    mapProducts(state){
      let mapArr = [];
      for(let i = 0; i < state.items.length; i++){
        mapArr[state.items[i].id_product] = state.items[i];
      }
      return mapArr;
    },
    get_product_by_id: (state, getters) => (id) => {
      return getters.items.find((elem) => {
        return elem.id_product === id;
      })
    },
    item: (state, getters) => (id) => {
      return getters.mapProducts[id];
    }
  }
}
function getProducts(){
  return [
    {
      id_product: 14,
      name: "Xiaomi Mi 9T Pro",
      desc: "Android, экран 6.39\" AMOLED (1080x2340), Qualcomm Snapdragon 855, ОЗУ 6 ГБ, флэш-память 128 ГБ, камера 48 Мп, аккумулятор 4000 мАч, 2 SIM",
      price: 520,
      img: require('../../assets/img/id14.jpg')
    },
    {
      id_product: 17,
      name: "HONOR 20",
      desc: "Android, экран 6.26\" IPS (1080x2340), HiSilicon Kirin 980, ОЗУ 6 ГБ, флэш-память 128 ГБ, камера 48 Мп, аккумулятор 3750 мАч, 2 SIM",
      img: require('../../assets/img/id17.jpeg'),
      price: 350
    }
  ]
}

А вот мой компонент Product.vue, где я пытаюсь получить объект продукта по его id:

<template>
<div>
  <h1>{{ get_product }} - {{ get_product_id }}</h1>
</div>
</template>
<script>
  import {mapGetters} from 'vuex';
    export default {
        name: "Product",
        data() {
            return { }
        },
        computed: {
            ...mapGetters("products", {
                get_product_by_id: "get_product_by_id",
                item: "item"
            }),
            get_product_id(){
                return this.$route.params.id;
            },
            get_product(){
                console.log(this.get_product_by_id(this.get_product_id)); // В консоли undefined
                return this.get_product_by_id(this.get_product_id); // Не работает и все тут
                //return this.get_product_by_id(19); // Так работает!!!
                //return this.item(this.get_product_id); // Так тоже работает!!!
            }
        },
        methods: { }
    }
</script>

Как видно из комментариев, в computed, в методе get_product строка

return this.get_product_by_id(this.get_product_id);

категорически отказывается работать, при попытке вывести результат в консоль пишет undefined.

При этом если вызвать:

return this.get_product_by_id(19);

то я успешно получаю объект продукта. Также успешно возвращает мне обект продукта вызов:

return this.item(this.get_product_id);

Объясните проблему вызова

return this.get_product_by_id(this.get_product_id);

Почему это не работает, хотя должно работать!!!

Answer 1

Проблема в том, что из строки запроса параметр роута id приходит как строка. Это можно проверить добавив оператор typeof перед id и вывести в console.log() - получим string. А метод this.get_product_by_id() требует id как число. Проблему можно решить, приведя id к числу, вот так:

return parseInt(this.$route.params.id);
READ ALSO
Почему key в React нужен только в перечислениях?

Почему key в React нужен только в перечислениях?

Была поставлена задача реализовать свою JSX factoryИз документации React мы знаем, что JSX транспилируется в вызов функции React

142
Как отдельно определить стили для разных ориентаций печатаемых страниц?

Как отдельно определить стили для разных ориентаций печатаемых страниц?

Когда пользователь желает распечатать страницу, в зависимости от того какую ориентацию, в открывшемся окне, он выберет (портретная/альбомная),...

120
Правильное удаление клика с элементов

Правильное удаление клика с элементов

Хотелось бы, чтобы при нажатии на кнопку прошлый клик с переменной 'hi' удалялсяНо почему-то этого не происходит

111
Почему слайдер не работает?

Почему слайдер не работает?

Есть слайдер, который должен перелистывать картинки

90