我一直在使用vue 3：Vue.js教程：初学者到前端开发人员https://www.youtube.com/watch?v=1GNsWa_EZdw&t=48s
一切似乎都在我这边工作太多，除了‘更新‘的导航列表。他谈到了从04：01：20开始的页面更新的Eventlistener。
为什么为'this.pages'分配一个新数组不能更新我这边的v-for，我可以尝试/调试什么？

this.$bus.$on('page-updated', () => {
    this.pages = [...this.$pages.getAllPages()];
});

字符串
相关脚本部分：

Navbar.vue

<template>
    ...
    <navbar-link
        v-for="(page, index) in publishedPages" 
        class="nav-item" 
        :key="index"
        :page="page"
        :index="index"                  
    ></navbar-link>
    ...
</template>

<script>
import NavbarLink from './NavbarLink.vue';

export default {
    components: {
        NavbarLink
    },
    inject: ['$pages', '$bus'],
    created() {
        this.pages = this.$pages.getAllPages();
        this.$bus.$on('page-updated', () => {
            this.pages = [...this.$pages.getAllPages()];
        });
    },
    data() {
        return {
            theme: 'dark',
            data: []
        }
    },
    computed: {
        publishedPages() {
            return this.pages.filter(p => p.published)
        }
    },
    ..
  } 
}
</script>

型

PadeEdit.vue

<script setup>
import { useRouter } from 'vue-router';
import { inject } from 'vue';
const router = useRouter();
const pages = inject('$pages');
const bus = inject('$bus');
const {index} = defineProps(['index']);
let page = pages.getSinglePage(index);
function submit() {
    pages.editPage(index, page);
    bus.$emit('page-updated', {
        index,
        page
    });
    ...
}
...
</script>

型

Events.js

const events = new Map();
export default {
    $on(eventName, fn) {
        if (!events.has(eventName)) {
            events.set(eventName, [])
        }
        events.get(eventName).push(fn);
    },
    $emit(eventName, data) {
        if (events.has(eventName)) {
            events.get(eventName).forEach(fn => fn(data));
        }
    }
};

型

data.js

const pagesKey = 'pages';

let pagesJson = localStorage.getItem(pagesKey);
let pagesStore = JSON.parse(pagesJson);

function save() {
    localStorage.setItem(pagesKey, JSON.stringify(pagesStore));
}

export default {
    addPage(page){
        pagesStore.push(page);
        save();
    },
    getAllPages() {
        return pagesStore;
    },
    getSinglePage(index) {
        return pagesStore[index];
    },
    editPage(index, page) {
        pagesStore[index] = page;
        save();
    }
}

型