Как вытащить даные из proxy в vue 3?

Question

[Сергей Бурдужа]

Добрые день.

Настроил getter для single product.

export default {
  namespaced: true,
  state: {
    items: tmpGetProducts()
  },
  getters: {
    all: (state) => state.items,
    singleProduct(state) {
      return (id) => {
        const product = state.items.filter((item) => {
          return item.id.toString() === id
        })
        return product
      }
    }
  },
  mutations: {},
  actions: {}
}

function tmpGetProducts() {
  return [
    { id: 100, title: "Iphone", price: 200 },
    { id: 101, title: "Lenovo", price: 300 },
    { id: 102, title: "Nokia", price: 400 },
    { id: 103, title: "Samsung", price: 400 }
  ]
}

Теперь на страницы товара нужно вывести данные.

import { mapGetters } from "vuex"
export default {
  data() {
    return {
      item: null
    }
  },
  computed: {
    ...mapGetters("products", { singleProduct: "singleProduct" })
  },
  mounted() {
    this.item = this.singleProduct(this.$route.params.id)
    console.log("this.item", this.item)
  }
}

Только в консоли выводится proxy.



Как быть?

Заране благодарен.

Comments

[WapSter]

Обратиться к по ключу объекта пробовал?

[Сергей Бурдужа]

WapSter, Спасибо решил.

Сделал через find.

singleProduct(state, getters) {
      return (id) => {
        const product = getters.all.find((item) => {
          return item.id.toString() === id
        })
        return product
      }
    }

Проблема была в том, что id = string, а item.id = number.

[Антон Антон]

Сергей Бурдужа, Вообще правильно было бы передавать параметры из роута в пропсы напрямую, заодно с преобразованием в нужные типы.

[Сергей Бурдужа]

Антон Антон, Я только начал изучать vue, так что это не окончательное решение.