使用ant-design-vue/pro-layout 遇到的问题

菜单选中问题

参考@ant-design-vue/pro-layout 的 README.md，开始是这么写的：

const state = reactive({
  collapsed: false, // default value
  openKeys: ['/home'],
  selectedKeys: ['/home/index'],
})

然而，点击左侧某一菜后，当前选中的和点击的不一致、左下角的菜单收缩按钮也不管用。

把reactive换成ref了，上边的问题就解决了，代码：

const state = ref({
  collapsed: false, // default value
  openKeys: ['/home'],
  selectedKeys: ['/home/index'],
});

下面是完整代码：

<template>
    <pro-layout
        v-bind="layoutConf"
        v-model:openKeys="state.openKeys"
        v-model:collapsed="state.collapsed"
        v-model:selectedKeys="state.selectedKeys"
    >
        <router-view />
    </pro-layout>
</template>

<script>
import { getMenuData, clearMenuItem } from '@ant-design-vue/pro-layout';
import router from '@/router'
import { ref } from 'vue'

export default {
    name: 'BasicLayout',
    setup(){
        const routes=router.getRoutes();
        const { menuData } = getMenuData(clearMenuItem(routes));
        // console.log(menuData);
        const layoutConf = ref({
            navTheme: 'light',
            headerTheme: 'light',
            layout: 'sidemenu',
            splitMenus: true,
            primaryColor:'#F5222D',
            contentWidth: 'Fluid',
            fixedHeader: true,
            fixSiderbar: true,
            menuData,
        });
        const state = ref({
            collapsed: false, // default value
            openKeys: ['/home'],
            selectedKeys: ['/home/index'],
        });
        return{
            layoutConf,
            state,
        }

    }
}

</script>