refactor: 响应式对象reactive解构

src/views/system/menu/components/Menu.vue

@@ -1,10 +1,10 @@
 <template>
-  <div>
+  <div class="component-container">
     <!-- 搜索表单 -->
     <el-form
         ref="queryForm"
         size="mini"
-        :model="state.queryParams"
+        :model="queryParams"
         :inline="true"
     >
       <el-form-item>
@@ -13,7 +13,7 @@
 
       <el-form-item>
         <el-input
-            v-model="state.queryParams.name"
+            v-model="queryParams.name"
             placeholder="菜单名称"
             clearable
             @keyup.enter.native="handleQuery"
@@ -27,8 +27,8 @@
 
     <!-- 数据表格 -->
     <el-table
-        v-loading="state.loading"
+        v-loading="loading"
-        :data="state.menuList"
+        :data="menuList"
         row-key="id"
         highlight-current-row
         :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
@@ -74,36 +74,36 @@
 
     <!-- 弹窗表单 -->
     <el-dialog
-        :title="state.dialog.title"
+        :title="dialog.title"
-        v-model="state.dialog.visible"
+        v-model="dialog.visible"
-        width="800px"
+        width="750px"
     >
       <el-form
           ref="dataForm"
-          :model="state.formData"
+          :model="formData"
-          :rules="state.rules"
+          :rules="rules"
-          label-width="80px">
+      >
         <el-form-item label="父级菜单" prop="parentId">
           <tree-select
-              v-model="state.formData.parentId"
+              v-model="formData.parentId"
-              :options="state.menuOptions"
+              :options="menuOptions"
               placeholder="选择上级菜单"
           />
         </el-form-item>
 
         <el-form-item label="菜单名称" prop="name">
-          <el-input v-model="state.formData.name" placeholder="请输入菜单名称"/>
+          <el-input v-model="formData.name" placeholder="请输入菜单名称"/>
         </el-form-item>
 
         <el-form-item label="页面路径" prop="component">
           <el-input
-              v-model="state.formData.component"
+              v-model="formData.component"
-              :readonly="state.formData.parentId==0?true:false"
+              :readonly="formData.parentId==0?true:false"
               placeholder="system/user/index"
               style="width: 95%"
           >
-            <template v-if="state.formData.parentId!=0" #prepend>src/views/</template>
+            <template v-if="formData.parentId!=0" #prepend>src/views/</template>
-            <template v-if="state.formData.parentId!=0" #append>.vue</template>
+            <template v-if="formData.parentId!=0" #append>.vue</template>
           </el-input>
 
           <el-tooltip effect="dark"
@@ -123,11 +123,11 @@
           >
             <icon-select ref="iconSelectRef" @selected="selected"/>
             <template #reference>
-              <el-input v-model="state.formData.icon" placeholder="点击选择图标" readonly>
+              <el-input v-model="formData.icon" placeholder="点击选择图标" readonly>
                 <template #prefix>
                   <svg-icon
-                      v-if="state.formData.icon"
+                      v-if="formData.icon"
-                      :icon-class="state.formData.icon"
+                      :icon-class="formData.icon"
                       class="el-input__icon"
                       style="height: 40px;width: 16px;"
                       color="#999"
@@ -140,18 +140,18 @@
         </el-form-item>
 
         <el-form-item label="状态">
-          <el-radio-group v-model="state.formData.visible">
+          <el-radio-group v-model="formData.visible">
             <el-radio :label="1">显示</el-radio>
             <el-radio :label="0">隐藏</el-radio>
           </el-radio-group>
         </el-form-item>
 
         <el-form-item label="排序" prop="sort">
-          <el-input-number v-model="state.formData.sort" style="width: 100px" controls-position="right" :min="0"/>
+          <el-input-number v-model="formData.sort" style="width: 100px" controls-position="right" :min="0"/>
         </el-form-item>
 
         <el-form-item label="跳转路径">
-          <el-input v-model="state.formData.redirect" placeholder="请输入跳转路径" maxlength="50"/>
+          <el-input v-model="formData.redirect" placeholder="请输入跳转路径" maxlength="50"/>
         </el-form-item>
       </el-form>
 
@@ -169,7 +169,7 @@
 import {listTableMenus, getMenuDetail, listTreeSelectMenus, addMenu, deleteMenus, updateMenu} from "@/api/system/menu";
 import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons'
 import {ElForm, ElMessage, ElMessageBox} from "element-plus";
-import { reactive, ref, unref, onMounted} from "vue";
+import {reactive, ref, unref, onMounted, toRefs} from "vue";
 import SvgIcon from '@/components/SvgIcon/index.vue';
 import TreeSelect from '@/components/TreeSelect/index.vue';
 import IconSelect from '@/components/IconSelect/index.vue';
@@ -177,6 +177,8 @@ import IconSelect from '@/components/IconSelect/index.vue';
 const emit = defineEmits(['menuClick'])
 const showChooseIcon = ref(false);
 const iconSelectRef = ref(null);
+const dataForm = ref(ElForm)
+
 const state = reactive({
   loading: true,
   // 选中ID数组
@@ -221,6 +223,8 @@ const state = reactive({
   currentRow: undefined
 })
 
+const {loading,single,multiple,queryParams,menuList,total,dialog,formData,rules,menuOptions} =toRefs(state)
+
 function handleQuery() {
   // 重置父组件
   emit('menuClick', null)
@@ -306,8 +310,6 @@ async function handleUpdate(row: any) {
   })
 }
 
-const dataForm = ref(ElForm)
-
 function submitForm() {
   const form = unref(dataForm)
   form.validate((valid: any) => {
@@ -329,6 +331,22 @@ function submitForm() {
   })
 }
 
+function handleDelete(row: any) {
+  const ids = [row.id || state.ids].join(',')
+  ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    deleteMenus(ids).then(() => {
+      ElMessage.success('删除成功')
+      handleQuery()
+    })
+  }).catch(() =>
+      ElMessage.info('已取消删除')
+  )
+}
+
 function resetForm() {
   state.formData = {
     id: undefined,
@@ -347,22 +365,6 @@ function cancel() {
   state.dialog.visible = false
 }
 
-function handleDelete(row: any) {
-  const ids = [row.id || state.ids].join(',')
-  ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(() => {
-    deleteMenus(ids).then(() => {
-      ElMessage.success('删除成功')
-      handleQuery()
-    })
-  }).catch(() =>
-      ElMessage.info('已取消删除')
-  )
-}
-
 function showSelectIcon() {
   (iconSelectRef as any).value.reset();
   showChooseIcon.value = true;

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

src/views/system/role/index.vue

@@ -4,7 +4,6 @@
       <el-col :span="10" :xs="24">
         <el-card class="box-card" shadow="always">
           <template #header>
-
             <svg-icon color="#333" icon-class="role"/>
             角色列表
           </template>
@@ -17,13 +16,13 @@
           <template #header>
             <svg-icon color="#333" icon-class="menu"/>
             <span style="margin:0 5px;">菜单分配</span>
-            <el-tag type="success" v-if="state.role.id" size="small">
+            <el-tag type="success" v-if="role.id" size="small">
               <svg-icon color="green  " icon-class="role"/>
-              {{ state.role.name }}
+              {{ role.name }}
             </el-tag>
             <el-tag type="warning" v-else size="small">请选择角色</el-tag>
           </template>
-          <menus ref="menu" @menuClick="handleMenuClick" :role="state.role"/>
+          <menus ref="menu" @menuClick="handleMenuClick" :role="role"/>
         </el-card>
       </el-col>
 
@@ -33,19 +32,19 @@
             <svg-icon color="#333" icon-class="perm"/>
             <span style="margin:0 5px;">权限分配</span>
 
-            <el-tag type="success" style="margin:0 5px 0 0;" v-if="state.role.id" size="small">
+            <el-tag type="success" style="margin:0 5px 0 0;" v-if="role.id" size="small">
               <svg-icon color="green" icon-class="role"/>
-              {{ state.role.name }}
+              {{ role.name }}
             </el-tag>
             <el-tag type="warning" style="margin:0 5px  0 0;" v-else size="small"> 请选择角色</el-tag>
 
-            <el-tag type="success" v-if="state.menu.id" size="small">
+            <el-tag type="success" v-if="menu.id" size="small">
               <svg-icon color="red" icon-class="menu"/>
-              {{ state.menu.name }}
+              {{ menu.name }}
             </el-tag>
             <el-tag type="warning" v-else size="small"> 请选择菜单</el-tag>
           </template>
-          <perm ref="perm" :menu="state.menu" :role="state.role"/>
+          <perm ref="perm" :menu="menu" :role="role"/>
         </el-card>
       </el-col>
 
@@ -57,7 +56,7 @@
 import Role from './components/Role.vue'
 import Menus from './components/Menu.vue'
 import Perm from './components/Perm.vue'
-import {reactive} from "vue";
+import {reactive, toRefs} from "vue";
 import {ElMessage} from "element-plus";
 import SvgIcon from '@/components/SvgIcon/index.vue';
 
@@ -72,6 +71,8 @@ const state = reactive({
   }
 })
 
+const {role,menu} =toRefs(state)
+
 function handleRoleClick(roleRow: any) {
   if (roleRow) {
     state.role = {