我有一个 Vuex 存储，它将状态定义为 null：

const state = {
    Product: null  // I could do Product:[] but that causes a nested array of data
};

const getters = {
     getProduct: (state) => state.Product
};

const actions = {
     loadProduct({commit}, {ProudctID}) {
     axios.get(`/api/${ProductID}`).then(response => {commit('setProduct', response.data)})
     .catch(function (error) {
     //error handler here
     }
   }
};

const mutations = {
     setProduct(state, ProductData) {
     state.Product = ProductData
     }
};

在我的 Vue 组件中，我想在 Product 数据可用时显示它。所以我这样做了：

<template>
   <div v-if="Product.length">{{Product}}</div>
</template>

当我运行它时，我收到一条错误消息

Vue warn: Error in render: "TypeError: Cannot read property 'length' of null"

好的，所以我尝试了这个，但它什么也不做（没有抛出任何错误并且从不显示数据）：

<template>
   <div v-if="Product != null && Product.length">{{Product}}</div>
</template>

如果 Product 对象数据不为 null，那么显示它的正确方法是什么？ Product 是一个 JSON 对象，其中填充了来自数据库的数据，如下所示：

[{ "ProductID": 123, "ProductTitle": "Xbox One X Gaming" }]

我的 Vue 组件获取的数据如下：

computed:
            {
            Product() {
                return this.$store.getters.getProduct
            }
        }
        ,
        serverPrefetch() {
            return this.getProduct();
        },
        mounted() {
            if (this.Product != null || !this.Product.length) {
                this.getProduct();
            }
        },
        methods: {
            getProduct() {
                return this.$store.dispatch('loadProduct')
            }
        }

如果我查看 Vue Dev Tools，结果发现我的 Vue 组件中的 Product 始终为 null ，但在 Vuex 选项卡中它填充了数据。奇怪吗？