Vue3 中使用reactive实现子路由页面改变父页面数据

使用场景

在菜单管理子页面中增加、修改或删除菜单后父级页面的页面菜单需要同步刷新，本文主要介绍基于Vue3 的reactive方式实现，本文Vue的代码风格为组合式，如果想了解组合式和选项式API风格的区别请参考官方文档。

实现过程

整体思路是依赖一个外部状态JS文件，然后在该文件中使用reactive响应式定义数据结构，最后在不同的组件中import该文件，在需要改变状态的地方调用该该文件中的值进行修改即可。

创建store.js（名称随意）

import {
    
     reactive } from "vue";

//定义响应式数据
export const menuStore = reactive({
    
    
    menuList:[]
})

父级页面使用

文件名称：Home.vue，一下为主要JS文件

<script setup>
    import {
    
    get} from '../api/http';
    import {
    
     useRouter } from 'vue-router';
    import {
    
     onMounted, ref } from 'vue';
    import {
    
     ElMessage } from 'element-plus';
    import {
    
     menuStore } from '../utils/store'; //导入store.js文件


    const router = useRouter()

    const getMenuList = () => {
    
    
        get('menu').then(res=>{
    
    
            if(res.status){
    
    
            	//为响应式值赋值
                menuStore.menuList = res.data
            }else{
    
    
                ElMessage({
    
    type: 'error', message: res.msg})
            }
        })
    }
</script>

子页面使用

文件名称：MenuManager.vue 以下为主要JS代码

<script setup>
import {
    
     menuStore } from '../../utils/store';

//在需要变更的地方调用此方法
const reloadHomeMenu = () => {
    
    
    get('menu').then(res=>{
    
    
        if(res.status){
    
    
            menuStore.menuList = res.data
        }
    })
}

结果演示