<template>
? <div>
? ? <!-- 添加增加方法 ?傳遞給子組件-->
? ? <Shijian :addTodo="addTodo" />
? ? <!-- 傳遞給子組件數(shù)據(jù) -->
? ? <!-- 傳遞刪除方法 子組件-->
? ? <Shijianone :todos="todos" :delTodo="delTodo" />
? ? <!-- 傳遞給子組件 -->
? ? <Shijiantwo
? ? ? :todos="todos"
? ? ? :selectedAllTodo="selectedAllTodo"
? ? ? :delFinishedTodos="delFinishedTodos"
? ? />
? </div>
</template>

<script scoped>
import Shijian from "@/components/Shijian";
import Shijianone from "@/components/Shijianone";
import Shijiantwo from "@/components/Shijiantwo";
import localStorageUtil from "@/utils/localStorageUtil";
export default {
? name: "Body",
? data() {
? ? return {
? ? ? todos: localStorageUtil.readTodos(),
? ? };
? },
? components: {
? ? Shijian,
? ? Shijianone,
? ? Shijiantwo,
? },
? // 添加刪除方法
? // 添加增加方法
? methods: {
? ? // 插入數(shù)據(jù) ? 參數(shù)為(數(shù)據(jù))
? ? addTodo(todo) {
? ? ? // 傳遞數(shù)據(jù) (todo)
? ? ? this.todos.unshift(todo);
? ? },
? ? delTodo(index) {
? ? ? // 刪除一條
? ? ? this.todos.splice(index, 1);
? ? },
? ? // 是否選中所有任務(wù)
? ? selectedAllTodo(isCheck) {
? ? ? this.todos.forEach((todo) => {
? ? ? ? todo.finished = isCheck;
? ? ? });
? ? },
? ? // 選中刪除的方法
? ? delFinishedTodos() {
? ? ? this.todos = this.todos.filter((todo) => !todo.finished);
? ? },
? },
? watch: {
? ? // 深度監(jiān)視
? ? todos: {
? ? ? // 一旦監(jiān)聽到變化,就保存到本地
? ? ? // .saveTodos加了()會(huì)報(bào)錯(cuò)
? ? ? // 執(zhí)行保存操作
? ? ? handler: localStorageUtil.saveTodos,
? ? ? // deep: true,深度監(jiān)視
? ? ? deep: true,
? ? ? // immediate為true 一進(jìn)來就執(zhí)行handler函數(shù)
? ? ? immediate: true,
? ? },
? },
};
</script>

<style scoped>
</style>

const LKTODO ='lktodo';
export default{
    readTodos(){
return JSON.parse(localStorage.getItem(LKTODO) ||'[]')
    },
    saveTodos(todos){
        // 下面這行只是為了打印一下
        console.log(todos);
localStorage.setItem(LKTODO, JSON.stringify(todos));
    }
}

// 監(jiān)聽緩存事件
Vue.prototype.$addStorageEvent = function(type, key, data) {
    if (type === 1) {
        // 創(chuàng)建一個(gè)StorageEvent事件
        var newStorageEvent = document.createEvent("StorageEvent");
        const storage = {
            setItem: function(k, val) {
                localStorage.setItem(k, val);
                // 初始化創(chuàng)建的事件
                newStorageEvent.initStorageEvent(
                    "storageItem",
                    false,
                    false,
                    k,
                    null,
                    val,
                    null,
                    null
                );
                // 派發(fā)對(duì)象
                window.dispatchEvent(newStorageEvent);
            },
        };
        return storage.setItem(key, data);
    } else {
        // 創(chuàng)建一個(gè)StorageEvent事件
        var newStorageEvent = document.createEvent("StorageEvent");
        const storage = {
            setItem: function(k, val) {
                sessionStorage.setItem(k, val);
                // 初始化創(chuàng)建的事件
                newStorageEvent.initStorageEvent(
                    "setItem",
                    false,
                    false,
                    k,
                    null,
                    val,
                    null,
                    null
                );
                // 派發(fā)對(duì)象
                window.dispatchEvent(newStorageEvent);
            },
        };
        return storage.setItem(key, data);
    }
};

? ? window.addEventListener(
? ? ? "stotageItem",
? ? ? (e) => { // e代表存儲(chǔ)的數(shù)據(jù) { a:1 }
? ? ? ? JSON.parse(e.a)
? ? ? },
? ? ? false
? ? );

?this.$addStorageEvent(0, "useStorage",?
? ? // 寫入數(shù)據(jù)
? ? JSON.stringify({ a:1 })
?);