Vue.js Vue/Vuex访问对象元素

嗨，我对如何访问对象中的某些数据感到困惑。我正在使用Vuex，我有一个标准页面。在这里，我使用getter来获得付款 对象并将其传递给组件

<template>
    <div>
        <div class="container">
            <div class="row">
                <div class="col-12 flex">
                    <payment-details :payment="payment"></payment-details>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    import {
        PaymentDetails
    } from "@/components/Payment";

    export default {
        components: {
            'payment-details': PaymentDetails
        },
        created () {
            if (!this.payment.paymentID) {
                this.$store.dispatch('paymentById', this.$route.params['id'])
            }
        },
        computed: {
            payment () {
                return this.$store.getters.paymentById(this.$route.params['id'])
            }
        }
    }
</script>

我总是得到一个观察者对象。如果我尝试从此对象访问元素，例如

created() {
    console.log(this.payment.details)
}

我没有定义。我基本上有一个幻灯片，我在一个挂载钩创建。我需要将此对象中包含的一些项目推送到幻灯片阵列上

那么我如何才能真正访问这个对象的元素呢

---

谢谢

您应该在vuex对象上使用watcher

这里是文档的链接

您的

this.payment.details

很可能是在调用您的

创建的

方法后实例化的

将代码从创建的

方法移动到：

export default {
    watch: {
      payment: function (val) {
        console.log('-------- this is this.payment.details:');
        console.log(val.details);
      },
    ...

是的，它会给你一些未定义的东西，因为在你的道具中你只声明了一个支付对象，而不是下面这个

payment : {
  details: '',
  etc: ''
}

但当您在组件中使用此支付数据时，它仍然可以工作，就像它只会给您一个错误，比如“调用null上的详细信息”这样的错误。如果在您调用组件之前付款已经有数据，我更愿意将条件放在第一位。如下

<div v-if="payment.details">{{payment.details}}</div>

{{payment.details}

payment : {
  details: '',
  etc: ''
}

<div v-if="payment.details">{{payment.details}}</div>