Vuex报错：_ctx.getProduct.image_url未定义问题排查与解决

问题场景 #

我尝试通过Vue Router传递props加载产品数据，相关代码如下：

Vuex产品管理模块代码（store/modules/products_manager.js） #

import axios from 'axios';

const BASE_URL = "http://127.0.0.1:3000/"

const state = {
    product: [],
    products: [],
    category: "",
}

const getters = {
    getProducts(state) {
        return state.products;
    },
    getProduct(state) {
        console.log("GET")
        console.log(state.product)
        return state.product;
    },
    getCategory(state) {
        return state.category;
    },
}

const actions = {
    getAllProducts({ commit }, payload) {
        const config = {
            params: {
                title: payload['name']
            }
        }
        new Promise((resolve, reject) => {
            axios
            .get(`${BASE_URL}products/`, config)
            .then((response) => {
                commit("setProducts", response);
                resolve(response.data);
            })
            .catch((error) => {
                reject(error);
            });
        });
    },
    getProductById({ commit }, payload) {
        new Promise((resolve, reject) => {
            axios
            .get(`${BASE_URL}products/${payload}`)
            .then((response) => {
                commit("setProduct", response);
                console.log("PRODUCT")
                console.log(response.data)
                resolve(response.data);
            })
            .catch((error) => {
                reject(error);
            });
        });
    },
    getCategoryById({ commit }, payload) {
        new Promise((resolve, reject) => {
            axios
            .get(`${BASE_URL}categories/${payload}`)
            .then((response) => {
                commit("setCategory", response);
                resolve(response.data);
            })
            .catch((error) => {
                reject(error);
            });
        });
    },
}

const mutations = {
    setProducts(state, data) {
        state.products = data.data;
    },
    setProduct(state, data) {
        console.log("SET")
        console.log(data.data)
        state.product = data.data;
    },
    setCategory(state, data) {
        state.category = data.data;
    },
}

export default {
    state,
    getters,
    actions,
    mutations,
}

产品详情组件代码（components/ProductPage.vue） #

<template lang="">
    <div>
        <p v-if="(getProduct != null || getProduct != undefined)" >{{ getProduct['image_url'][0] }}</p>
    </div>
</template>


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

export default {
    name: 'Product',
    props: ["id", "category_id"],
    computed: {
        ...mapGetters(["getProduct", "getCategory"]),
    },
    mounted() {
        console.log(this.id)
        console.log(this.category_id)
        this.$store.dispatch("getProductById", this.id)
        this.$store.dispatch("getCategoryById", this.category_id)
    }
}
</script>

报错信息 #

Uncaught (in promise) TypeError: _ctx.getProduct.image_url is undefined

我刚开始学习Vuex，试过切换到created、updated等生命周期钩子调用接口，数据偶尔能渲染但报错始终存在，判断是Vue数据流异步导致的渲染时机问题，最终通过修改模板中的v-if判断条件解决了问题。

解决后的模板代码 #

<div>
    <p v-if="(getProduct['image_url'] != null || getProduct['image_url'] != undefined)" >{{ getProduct['image_url'][0] }}</p>
</div>

内容的提问来源于stack exchange，提问作者igorfz