VUEX

Question

我需要访问视图“Pop.vue”上的对象“articulos”的属性。此对象是 return 由 Getter.

我可以在视图上看到整个对象“关节”，如下所示：

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

但我不能只显示其中一个属性。我试过

{{obtenerArticuloPorId.nombre}}

错误：TypeError：无法读取未定义的属性（读取 'nombre'）

这是我的代码（为了便于阅读，我已经注释了与此相关的代码）：

index.js（商店）

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>

Answer 1

Array.prototype.find() returns undefined 如果没有匹配谓词。

由于您的 id 状态属性最初是一个空字符串，并且 articulos 元素的 none 具有空字符串 ID，因此您没有匹配项，因此 obtenerArticuloPorId.nombre 生成错误

Cannot read properties of undefined (reading 'nombre')

您可以通过使用 optional chaining

安全访问潜在的 undefined 对象来解决这个问题

<div class="popup">
  {{ obtenerArticuloPorId?.nombre }}
</div>

这将显示一个空值，直到您向商店提交有效的 id。或者，使用条件渲染等到你有一个有效的对象

<div class="popup" v-if="obtenerArticuloPorId">
  {{ obtenerArticuloPorId.nombre }}
</div>

VUEX - 无法访问 GETTER 返回的对象

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

javascript

getter

object

vuejs3