48TodoList使用第三方库 pubsub-js消息的订阅与发布实现组件间通信

TodoList使用第三方库 pubsub-js消息的订阅与发布实现组件间通信

App

<template>
     <MyList :todos="todos"></MyList>   // MyItem
</template>

<script>
    import pubsub from 'pubsub-js';
    import MyList from './components/MyList';

    export default {
        name:'App',
        components:{MyList},
        data(){
            return {
                todos:JSON.parse( localStorage.getItem('todos')) || [],
            }
        },
        methods:{
            checkTodo(funcName,tid){
                this.todos.forEach((todo)=>{
                    if(todo.tid==tid) todo.done= !todo.done;
                })
            },
            deleteTodo(funcName,tid){
                this.todos = this.todos.filter( todo => todo.tid != tid )
            },
        },
        watch:{
            todos:{
                deep:true,
                handler(todo){
                    localStorage.setItem('todos',JSON.stringify(todo))
                }
            }
        },
        mounted(){
            // 消息的订阅
            pubsub.subscribe('checkTodo',this.checkTodo);
            pubsub.subscribe('deleteTodo',this.deleteTodo);
        },
        beforeDestroy(){
            // 对象销毁前取消订阅
            pubsub.unsubscribe('checkTodo');
            pubsub.unsubscribe('deleteTodo');
        }
    }
</script>

MyItem

<template>
    <li>
        <label>
            <input type="checkbox" :checked="todo.done" @change="updateDone(todo.tid)"/>
            <span>{{todo.title}}</span>
        </label>
        <button class="btn btn-danger" @click="removeTodo(todo.tid)">删除</button>
    </li>
</template>

<script>
    import pubsub from 'pubsub-js';
    export default {
        name:'MyItem',
        props:['todo'],
        methods:{
            updateDone(tid){
                // 发布消息
                pubsub.publish('checkTodo',tid);
            },
            removeTodo(tid){
                if(confirm('你确定要删除么？')) {
                    pubsub.publish('deleteTodo',tid);
                }
            }
        },
    }
</script>