How to pull data from proxy in vue 3?

Question

Vue.js

Good afternoon.

Set up a getter for 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 }
  ]
}

Now you need to display data on the product pages.

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)
  }
}

Only the proxy is displayed in the console.



How to be?

Thanks in advance.