VUEX - can´t access to an object returned by GETTER-CodePudding

I need to access to a property of the object "articulos" on the view "Pop.vue". This object is return by a Getter.

I can see the whole object "articulos" on the view, like this:

{"id": "1", "nombre": "Bolso1", "categoria": "Bolso"}

but I can´t display just one of the properties. I have tried with

{{obtenerArticuloPorId.nombre}}

Error: TypeError: Cannot read properties of undefined (reading 'nombre')

This is my code (I have commented code in relation with this in order to make reading easier):

index.js (Store)

import { createStore } from 'vuex'

export default createStore({
   state: {
      categoriaArticulos: [
        "lamina", "bolso"
      ],
    articulos: [
        {id: '0', nombre: "Imagen1", categoria: "lamina"},
        {id: '1', nombre: "Imagen2", categoria: "lamina"},
        {id: '2', nombre: "Bolso1", categoria: "bolso"},
        {id: '3', nombre: "Bolso2", categoria: "bolso"}
      ],
      id: ''
   },
   mutations: {
      obtenerId(state, payload){
        state.id=payload
      }
   },
   actions:{
      obtenerId({commit}, id){
         commit('obtenerId', id)
      }
   },
   getters: {
      obtenerArticulosPorCategoria: (state) => (id) => {
          return state.articulos.filter(art=> art.categoria==id)
      },
      obtenerArticuloPorId(state){
          const articulo=state.articulos.find(art=> art.id===state.id)
          return articulo
      }
   }

Pop.vue

<template>
   <div class="popup">
       {{obtenerArticuloPorId}}
   </div>
</template>

<script>
    import {mapActions, mapGetters} from 'vuex'

    export default {

    methods:{
       ...mapActions(['obtenerId'])
    },
    computed: {
      ...mapGetters(['obtenerArticuloPorId'])
    }
}
</script>

CodePudding user response：