vue.js - 在 Vue / EventBus 中传递数据的问题

问题描述

关于在 Vue 中传递数据，我有一个不明白的问题。

在商店中，我有以下数据（六类 - 葡萄酒、啤酒、威士忌、杜松子酒、伏特加和朗姆酒）：

state: {
        shopItems: [
            {
                id: 1,
                category: "wine",
                price: 20,
                image:
                    "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//Z",
                items: [
                    {
                        id: 1,
                        name: "Ruby",
                        price: 17,
                        image:
                            "https://images.freshop.com/1564405684707189696/e52a7445e17de485c0ae890de8762d57_medium.png"
                    },
                    {
                        id: 2,
                        name: "Sauvignon Blanc",
                        price: 23,
                        image:
                            "https://ipcdn.freshop.com/resize?url=https://images.freshop.com/00898322593368/2e0ad0dbe0ef46eded5590acdf43cae5_large.png&width=256&type=webp&quality=40"
                    },
                    {
                        id: 3,
                        name: "Dark Horse",
                        price: 25,
                        image:
                            "https://ipcdn.freshop.com/resize?url=https://images.freshop.com/00085000024218/680b13803f3203f3117eb69082f95cc2_large.png&width=256&type=webp&quality=40"
                    },
                    {
                        id: 4,
                        name: "Andree",
                        price: 35,
                        image:
                            "https://ipcdn.freshop.com/resize?url=https://images.freshop.com/00085000008287/17d49b2b92223defb638ca7b535dbab3_large.png&width=256&type=webp&quality=40"
                    }
                ]
            },
            {
                id: 2,
                category: "beer",
                price: 3,
                image:
                    "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxIQEhAQEg8TFhEXExYSGRcVFRYSEhYVGBUYGBUVFRYcAAEAAgIDAQAAAAAAAAAAAAAABgcEBQEDCAL/",
                items: [
                    {
                        id: 1,
                        name: "Banana",
                        price: 5,
                        image:
                            "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxAQDxIPEhIPFRAPEhcPEBYSEBgSDw8QFRIS0tLS0uLi0tLS8tLS8tLi0tLS0tLi0tLS8tLS0wLS0tLS0tLS0tLSstLf/AABEIAOEA4QMBEQACEQEDEQH/xAAcAAEAAgIDAQAAAAAAAAAAAAAABQYEBwECCAP/"
                    },
                    {
                        id: 2,
                        name: "Franziskaner Weissbier",
                        price: 6,
                        image:
                            "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxIQEhAQEg8TFhEXExYSGRcVFRYSEhYVGBUDEQH/xAAcAAEAAgIDAQAAAAAAAAAAAAAABgcEBQEDCAL/xABIEAACAgECAgcEBwQFCgcAAAAAAQIDEQQhBRIGBxMiMUFRYXGBwRQjMnKRobFCUpLCJDNigtE0Q1 "
                    },
                    {
                        id: 3,
                        name: "Birra Moretti",
                        price: 5,
                        image:
                            "data:image/jpeg; QQFEiExBgcTIkFRYXGBFCMycpGhsdEkM0JSYsE1Q1OCkhUWJTREVIOTotLh8PH/xAAaAQEAAwEBAQAAAAAAAAAAAAAAAgMEAQUG/8QANBEBAAICAAQDBQcEAgMAAAAAAAECAxEEEiExE0FRBSIyYXGBkaGxwdHwFEJS4SPxFTOC/9oADAMBAAIRAxEAPwDuMBAQEBAQEBAQEBAQNHau1adKoe59wE7q91mLN5BVBJ+ "
                    }
                ]
            },

. . .

在我的应用程序中，我将与所选类别的索引相关的数据从 ToBeBought 组件传递到 ShowDetails 组件——使用 EventBus。

showDetails(item) {
            console.log("@item.category");
            console.log(item.category);
            const chosenCategoryIndex = this.shopItems.findIndex(
                i => i.category === item.category
            );
            // const chosenCategoryItems = this.shopItems[chosenCategoryIndex]
            //     .items;
            console.log("@chosenCategoryIndex");
            console.log(chosenCategoryIndex);
            EventBus.$emit("chosenCategory", chosenCategoryIndex);
            this.$router.push("/details");

我传递了所选类别的索引 - 例如，葡萄酒索引为 0。我在挂载时运行 selectedCategoryItems 方法（我也尝试在创建时运行它，但它没有帮助）以获取 ShowDetails 组件中的数据。在此方法的console.log 中，我得到一个包含详细数据的数组，例如葡萄酒，但在安装该方法之后，我有另一个控制台日志来显示数组（console.log（this.detailedItemsToBeBought）；） - 我从中得到未定义。看起来数据同时被清除了——我不明白这里发生了什么。我试图在 detailItemsToBeBought 数据上添加观察者，但它没有被触发。

data() {
    return {
        itemsToBeBought: [],
        detailedItemsToBeBought: []
    };
},

mounted() {
    this.chosenCategoryItems();
    console.log("@detailedItemsToBeBought mounted");
    console.log(this.detailedItemsToBeBought);
    console.log("@this.shopItems[0].items");
    console.log(this.shopItems[0].items);
},

methods: {
        chosenCategoryItems() {
            EventBus.$on("chosenCategory", data => {
                const chosenCategoryIndex = data;
                console.log("@chosenCategoryIndex");
                console.log(chosenCategoryIndex);
                this.detailedItemsToBeBought = this.shopItems[
                    chosenCategoryIndex
                ].items;
                console.log("@detailedItemsToBeBought event bus");
                console.log(this.detailedItemsToBeBought);
            });
            return this.detailedItemsToBeBought;
        }

当我尝试显示数据时，我什么也没看到，但是当硬编码 this.shopItems[0].items 时，我得到了我需要的数据 - 例如，对于葡萄酒类别，带有葡萄酒的数组；

我知道这不是一个容易的问题，但有没有人能够并愿意接受挑战来解释我这里可能出了什么问题。为什么我从 this.shopItems[0].items 获取数据但是当我将索引传递给 this.detailedItemsToBeBought = this.shopItems[chosenCategoryIndex].items; - 它在方法 selectedCategoryItems 中工作正常，但之后数据 this.detailedItemsToBeBought 在安装时未定义？

我附上控制台的屏幕截图。

[![在此处输入图像描述][1]][1] [1]：https://i.stack.imgur.com/30rk7.png

和整个存储库： https ://github.com/agnesliszka/alcohol_shop

标签： vue.jsvuejs2event-bus

看起来您的组件需要在发出事件之前注册侦听器。

您可能只想将所选类别存储在商店中，而不是使用事件。

如果你真的想使用一个事件（不推荐），你可以延迟发射，直到组件准备好之后，使用nextTickor setTimer。

您还需要在createdor中注册侦听器mounted。

this.$nextTick(()=>{
 EventBus.$emit("chosenCategory", chosenCategoryIndex);
})
this.$router.push("/details");

vue.js - 在 Vue / EventBus 中传递数据的问题

问题描述

解决方案

推荐阅读