refactor: 响应式对象reactive解构

src/views/system/menu/index.vue

@@ -15,10 +15,10 @@
           <template #header>
             <svg-icon color="#333" icon-class="perm"/>
             <span style="margin:0 5px;">权限列表</span>
-            <el-tag type="success" v-if="state.menuId" size="small">{{ state.menuName }}</el-tag>
+            <el-tag type="success" v-if="menuId" size="small">{{ menuName }}</el-tag>
             <el-tag type="warning" v-else size="small">请点击左侧菜单列表选择</el-tag>
           </template>
-          <perm-table :menuId="state.menuId" :menuName="state.menuName"/>
+          <perm-table :menuId="menuId" :menuName="menuName"/>
         </el-card>
       </el-col>
     </el-row>
@@ -30,13 +30,15 @@ import SvgIcon from '@/components/SvgIcon/index.vue';
 import MenuTable from './components/Menu.vue'
 import PermTable from './components/Perm.vue'
 
-import {reactive} from 'vue'
+import {reactive, toRefs} from 'vue'
 
 const state = reactive({
   menuId: undefined,
   menuName: ''
 })
 
+const {menuId,menuName}=toRefs(state)
+
 function handleMenuClick (menuRow: any){
   if (menuRow) {
     state.menuId = menuRow.id