Как определить пустое состояние Vuex и затем проверить, не является ли оно пустым / пустым в Vue компоненте?

Question

У меня есть хранилище Vuex, которое определяет состояние как ноль:

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: Ошибка при рендеринге: "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, окажется, что Product в моем Vue компоненте всегда null, но на вкладке Vuex он заполнен данными. Weird?

Answer 1

Это классический c случай для использования вычисляется:

computed: {
   product() {
     return this.Product || [];
   }
}