调试涉及多个文件之间的EventBus通信的程序

Question

我目前正在处理类似于练习应用程序的电子邮件，并努力弄清楚“撰写”按钮的工作方式以及如何将新发送的邮件保存在“已发送”框中。

该应用看起来像附件中的图像。

[程序的预期行为]

通过“新消息”撰写窗口的“发送”按钮发送新消息时（填写主题和消息后），新消息的信息将被发送并存储在侧栏的“已发送”框中，也增加了已发送消息的数量。 （已发送消息的数量设置为4，因此，如果我发送新消息，则应将其更新为5）

[问题]

通过“撰写新消息”窗口发送的已发送消息也不会存储，并且侧栏上的“已发送”消息的数量也不会更新。

[到目前为止我尝试过的事情]

• 通过设置console.log语句（并确认它确实对单击有反应）来查看“发送”按钮是否对单击有实际反应

（像这样）

methods:{
            sendMessage(){
                console.log('sendMessage called!');
                eventBus.$emit('sentMessage', {
                    message:{
                        subject: this.message.subject,
                        content: this.message.content,
                        isDeleted: false,
                        type: 'outgoing',
                        date: moment(),
                        from: {
                            name: 'Bo Andersen',
                            email: 'info@codingexplained.com'
                        },
                        attachments: []
                    }
                });
                console.log('eventBus called!');
            }
        }

• 通过设置console.log语句（并确认没有被调用）来查看是否在App.vue文件中调用了eventBus

（像这样）

created(){
            eventBus.$on('sentMessage', (data) => {
                console.log('eventBus called on created in App.vue!');
                let temp = [data.message];
                this.message = temp.concat(this.messages.slice(0));
                console.log('new message concatinated!');
            });

            eventBus.$on('refreshMessages', () => {
            //    console.log('page refresh got called!')
                let randomIndex = Math.floor(Math.random() * randomMessages.length);
                let temp = [randomMessages[randomIndex]];
                this.messages = temp.concat(this.messages.slice(0));
            //    console.log('page refreshed!');
            });
        },

[问题]

即使我怀疑程序的某些部分之间无法很好地进行通信，但我还是没有成功地发现任何通信缺陷。

我还应该考虑什么？

[该程序的src文件夹中涉及的文件]

• App.vue（由侧边栏组件和内容组件组成。）
• Compose.vue（负责撰写新邮件）
• Content.vue（与所附图像的右侧相对应）
• Important.vue
• Inbox.vue
• main.js
• Messages.vue（管理消息信息）
• Sent.vue
• Sidebar.vue（与配置文件图像，名称，电子邮件地址，撰写按钮，收件箱，已发送，重要，已删除邮件对应，显示在附件图像的左侧。）
• Trash.vue
• ViewMessage.vue

[代码的某些部分向您显示一些详细信息]

App.vue

<template>
    <div class="container">
        <div class="mail-box">
            <!-- v-bind directives -->
            <app-sidebar :messages="messages"></app-sidebar>
            <app-content :messages="messages"></app-content>
        </div>
    </div>
</template>

<script>
    import Sidebar from './Sidebar.vue';
    import Content from './Content.vue';
    import messages from './data/messages';
    import randomMessages from './data/random-messages';
    import { eventBus } from './main';

    export default {
        data(){
            return{
                messages: messages
            };
        },
        created(){
            eventBus.$on('sentMessage', (data) => {
                console.log('eventBus called on created in App.vue!');
                let temp = [data.message];
                this.message = temp.concat(this.messages.slice(0));
                console.log('new message concatinated!');
            });

            eventBus.$on('refreshMessages', () => {
            //    console.log('page refresh got called!')
                let randomIndex = Math.floor(Math.random() * randomMessages.length);
                let temp = [randomMessages[randomIndex]];
                this.messages = temp.concat(this.messages.slice(0));
            //    console.log('page refreshed!');
            });
        },
        components: {
            appSidebar: Sidebar,
            appContent: Content
        }
    }
</script>

Sidebar.vue

<template>
    <aside class="sm-side">
        <div class="user-head">
            <img src="src/assets/images/profile.jpg">

            <div class="user-name">
                <h5>Bo Andersen</h5>
                <span class="email-address">info@codingexplained.com</span>
            </div>
        </div>

        <div class="compose-wrapper">
            <app-compose></app-compose>
        </div>

        <ul class="inbox-nav">
            <li :class="{ active: activeView == 'app-inbox' }">
                <a href="#" @click.prevent="navigate('app-inbox', 'Inbox')">   <!-- 'tag name' and 'title' as the parameters of navigate --> 
                    <i class="fa fa-inbox"></i>Inbox <span class="label label-danger pull-right">{{ unreadMessages.length }}</span>
                </a>
            </li>

            <li :class="{ active: activeView == 'app-sent' }">
                <a href="#" @click.prevent="navigate('app-sent', 'Sent')">
                    <i class="fa fa-envelop-o"></i>Sent <span class="label label-default pull-right">{{ sentMessages.length }}</span>
                </a>
            </li>

            <li :class="{ active: activeView == 'app-important' }">
                <a href="#" @click.prevent="navigate('app-important', 'Important')">
                    <i class="fa fa-bookmark-o"></i>Important <span class="label label-warning pull-right">{{ importantMessages.length }}</span>
                </a>
            </li>

            <li :class="{ active: activeView == 'app-trash' }">
                <a href="#" @click.prevent="navigate('app-trash', 'Trash')">
                    <i class=" fa fa-trash-o"></i>Trash <span class="label label-default pull-right">{{ trashedMessages.length }}</span>
                </a>
            </li>
        </ul>
    </aside>
</template>

<script>
    // needs to be curly braces because we'll potentiall export multiple objects or values 
    import { eventBus } from './main';
    import Compose from './Compose.vue';

    export default {
        props:{
            messages:{
                type: Array,
                required: true
            }
        },
        created(){
            eventBus.$on('changeView', (data) => {
              this.activeView = data.tag; 
            });
        },
        data(){
          return{
              activeView: 'app-inbox'
          };
        },
        methods:{
            // tag name and title
            navigate(newView, title) {
                eventBus.$emit('changeView', {
                    tag: newView,
                    title: title
                });
            }
        },
        computed:{
            unreadMessages(){
                return this.messages.filter(function(message){
                    return (message.type == 'incoming' && !message.isRead && !message.isDeleted)
                });
            },
            sentMessages(){
                return this.messages.filter(function(message){
                    return (message.type == 'outgoing' && !message.isDeleted)
                });
            },
            importantMessages(){
                return this.messages.filter(function(message){
                    return (message.type == 'incoming' && message.isImportant === true && !message.isDeleted);
                });
            },
            trashedMessages(){
                return this.messages.filter(function(message){
                    return message.isDeleted === true;
                });
            }
        },
        components: {
            appCompose: Compose
        }

    }
</script>

Compose.vue

<template>
    <div>
        <a href="#composeModal" data-toggle="modal" class="btn btn-compose">Compose</a>

        <div aria-hidden="true" role="dialog" tabindex="-1" id="composeModal" class="modal fade" style="display: none;">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">&times;</button>
                        <h4 class="modal-title">New Message</h4>
                    </div>

                    <div class="modal-body">
                        <form role="form" class="form-horizontal" @submit.prevent="sendMessage">
                            <div class="form-group">
                                <label class="col-lg-2 control-label" for="subject">Subject</label>
                                <div class="col-lg-10">
                                    <input type="text" id="subject" class="form-control" v-model="message.subject">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-lg-2 control-label" for="message">Message</label>
                                <div class="col-lg-10">
                                    <textarea rows="10" cols="30" class="form-control" id="message" v-model="message.content"></textarea>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-lg-offset-2 col-lg-10">
                                    <button class="btn btn-send" type="submit">Send</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { eventBus} from './main';
    import moment from 'moment';

    export default{
        data(){
            return {
                message: {
                    subject: '',
                    content: ''
                }
            };
        },
        methods:{
            sendMessage(){
                console.log('sendMessage called!');
                eventBus.$emit('sentMessage', {
                    message:{
                        subject: this.message.subject,
                        content: this.message.content,
                        isDeleted: false,
                        type: 'outgoing',
                        date: moment(),
                        from: {
                            name: 'Bo Andersen',
                            email: 'info@codingexplained.com'
                        },
                        attachments: []
                    }
                });
                console.log('eventBus called!');
            }
        }
    }
</script>

在收到评论后更新

App.vue

<template>
    <div class="container">
        <div class="mail-box">
            <!-- v-bind directives -->
            <app-sidebar :messages="messages"></app-sidebar>
            <app-content :messages="messages"></app-content>
        </div>
    </div>
</template>

<script>
    import Sidebar from './Sidebar.vue';
    import Content from './Content.vue';
    import messages from './data/messages';
    import randomMessages from './data/random-messages';
    import { eventBus } from './main';

    export default {
        data(){
            return{
                messages: messages
            };
        },
        created(){
            // Save the component to a local variable for use in event callbacks
            var that = this;

            eventBus.$on('sentMessage', (data) => {
                // notice the differences between these two objects
                console.log(this, that); 

                console.log('eventBus called on created in App.vue!');
                let temp = [data.message];
           //     this.message = temp.concat(this.messages.slice(0));  // was originally using this
                that.message = temp.concat(that.messages.slice(0));   // this got replaced with that
                console.log('new message concatinated!');
            });

            eventBus.$on('refreshMessages', () => {
            //    console.log('page refresh got called!')
                let randomIndex = Math.floor(Math.random() * randomMessages.length);
                let temp = [randomMessages[randomIndex]];
                this.messages = temp.concat(this.messages.slice(0));
            //    console.log('page refreshed!');
            });
        },
        components: {
            appSidebar: Sidebar,
            appContent: Content
        }
    }
</script>

Answer 1

假设您在{。{1}}和console.log的App.vue中未评论eventBus.$on('refreshMessages')消息时，对我来说似乎是一个范围界定问题。

使用事件总线时，事件处理程序中的eventBus.$on('sentMessage')是this对象本身，而不是组件。您可以将组件eventBus保存到局部变量，并在事件处理程序函数中使用它。像这样：

this