Vuex同步：无法读取未定义的属性

Question

我正在尝试使用 vuex 让事情变得更简单，总体来说还不错，但是在使用带有来自其他 getter 的参数的 getter 时我卡住了。

主要代码：

<template>
    <v-container>

        <v-card v-for="(order,i) in getOrders" :key="i" class="cart-cards text-left">

                <v-card-title>
                    {{getMealById(order.meal_id).name}}
                </v-card-title>
                <v-btn v-on:click="addQuantity(order)">
                        +
                    </v-btn>
                    <h1>
                        {{order.quantity}}
                    </h1>
                    <v-btn @click="reduceQuantity(order)">
                        -
                    </v-btn>

        </v-card>

    </v-container>
</template>

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

export default {
    data: () => ({
    }),
    created() {
        this.fetchOrders();
    },
    mounted() {
    },
    methods: {
        ...mapActions(["fetchOrders"]),
        addQuantity(order) {
            order.quantity += 1;
            this.updateOrders(order);
        },
        reduceQuantity(order) {
            if (order.quantity > 0) {
                order.quantity -= 1;
                this.updateOrders(order);
            }
        },
    },
    computed: {
        ...mapGetters(["getOrders", "getMealById"]),
    },
};

order.js：

import axios from 'axios'
import url from '../../config.js'

const state = {
    all_orders: [],
}
const getters = {
    getOrders : (state)=>state.all_orders,

}
const actions = {
    async fetchOrders({commit}) {
        const response = await axios.get("http://" + url + "/orders")
        commit('setOrders',response.data)
    },
    async updateOrders({commit},payload) {
        const response = await axios.put("http://" + url + "/orders/"+payload.id,payload)
        commit('setOrders',response.data)
    },
}
const mutations = {
    setOrders: (state,orders)=>{
        state.all_orders = orders
    },
}

export default {
    state,
    getters,
    actions,
    mutations
}

meal.js

import axios from 'axios'
import url from '../../config.js'

const state = {
    all_meals: [],
}
const getters = {
    getMeals: (state) => state.all_meals,
    getMealById: (state) => (id) => {
        return state.all_meals.find(todo => todo.id === id)
    }

}
const actions = {
    async fetchMeals({ commit }) {
        const response = await axios.get("http://" + url + "/meals")
        commit('setMeals', response.data)
    },
}
const mutations = {
    setMeals: (state, meals) => {
        state.all_meals = meals
    },
}

export default {
    state,
    getters,
    actions,
    mutations
}

所以当我从链接访问vue时，没有错误，但是当我自己加载url时，会发生错误并且getMealById不会触发

总体而言，他们是“等待”状态/动作调用响应的好习惯吗？

提前致谢！！！

Answer 1

在组件中，你可以检查getMeals是否返回一个非空数组，然后渲染v-for循环：

<template>
<v-container v-if="getMeals().length > 0">

    <v-card v-for="(order,i) in getOrders" :key="i" class="cart-cards text-left">

            <v-card-title>
                {{getMealById(order.meal_id).name}}
            </v-card-title>

    </v-card>

</v-container>
</template>

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

export default {
    data: () => ({
    }),
    created() {
        this.fetchOrders();
    },
    mounted() {
    },
    methods: {
        ...mapActions(["fetchOrders"]),
    },
    computed: {
        ...mapGetters(["getMeals", "getOrders", "getMealById"]),
    },
};