保存修改后的权限，并且引入piniade的数据可持续化

components.d.ts

@@ -10,39 +10,25 @@ declare module '@vue/runtime-core' {
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
-    ElCascader: typeof import('element-plus/es')['ElCascader']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
-    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
-    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
-    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
-    ElPagination: typeof import('element-plus/es')['ElPagination']
     ElProgress: typeof import('element-plus/es')['ElProgress']
-    ElRadio: typeof import('element-plus/es')['ElRadio']
-    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
-    ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
-    ElTag: typeof import('element-plus/es')['ElTag']
-    ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    ElUpload: typeof import('element-plus/es')['ElUpload']
     Header: typeof import('./src/components/header.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

package.json

@@ -13,6 +13,7 @@
 		"element-plus": "^2.2.14",
 		"md-editor-v3": "^2.2.1",
 		"pinia": "^2.0.20",
+		"pinia-plugin-persist": "^1.0.0",
 		"vue": "^3.2.37",
 		"vue-cropperjs": "^5.0.0",
 		"vue-router": "^4.1.3",

src/main.ts

@@ -1,5 +1,6 @@
 import {createApp} from 'vue'
 import { createPinia } from 'pinia'
+import piniaPluginPersist from 'pinia-plugin-persist'
 import ElementPlus from 'element-plus'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
@@ -12,7 +13,9 @@ import './assets/css/icon.css'
 
 const app = createApp(App)
 
-app.use(createPinia())
+const store = createPinia()
+store.use(piniaPluginPersist)
+app.use(store)
 app.use(router)
 app.use(ElementPlus, {
     locale: zhCn,

src/store/permiss.ts

@@ -1,23 +1,48 @@
-import { defineStore } from 'pinia';
+import { defineStore } from "pinia";
 
 interface ObjectList {
-	[key: string]: string[];
+  [key: string]: string[];
 }
 
-export const usePermissStore = defineStore('permiss', {
+export const usePermissStore = defineStore("permiss", {
-	state: () => {
+  state: () => {
-		const keys = localStorage.getItem('ms_keys');
+    const keys = localStorage.getItem("ms_keys");
-		return {
+
-			key: keys ? JSON.parse(keys) : <string[]>[],
+    return {
-			defaultList: <ObjectList>{
+      key: keys ? JSON.parse(keys) : <string[]>[],
-				admin: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16'],
+      defaultList: <ObjectList>{
-				user: ['1', '2', '3', '11', '13', '14', '15']
+        admin: [
-			}
+          "1",
-		};
+          "2",
-	},
+          "3",
-	actions: {
+          "4",
-		handleSet(val: string[]) {
+          "5",
-			this.key = val;
+          "6",
-		}
+          "7",
-	}
+          "8",
+          "9",
+          "10",
+          "11",
+          "12",
+          "13",
+          "14",
+          "15",
+          "16",
+        ],
+        user: ["1", "2", "3", "11", "13", "14", "15"],
+      },
+    };
+  },
+  persist: {
+    enabled: true,
+  },
+  actions: {
+    handleSet(val: string[]) {
+      this.key = val;
+      // this.defaultList = val
+    },
+    saveKeys(role: string, val: string[]) {
+      this.defaultList[role] = val;
+    },
+  },
 });

src/views/permission.vue

@@ -24,6 +24,7 @@
 
 <script setup lang="ts" name="permission">
 import { ref } from 'vue';
+import { ElMessage } from 'element-plus';
 import { ElTree } from 'element-plus';
 import { usePermissStore } from '../store/permiss';
 
@@ -118,12 +119,15 @@ getPremission();
 // 保存权限
 const tree = ref<InstanceType<typeof ElTree>>();
 const onSubmit = () => {
-	// 获取选中的权限
+	// 获取选中的权限  !. 非空断言符号 符号表示对象后面的属性一定不是null或者undefine
-	console.log(tree.value!.getCheckedKeys(false));
+	// console.log(tree.value!.getCheckedKeys(true));
+	// console.log(tree.value!.getCheckedKeys(false));
+	permiss.saveKeys(role.value, tree.value!.getCheckedKeys(false) as string[])
+	ElMessage.success('保存成功');
 };
 
-const handleChange = (val: string[]) => {
+const handleChange = (val: string) => {
-	tree.value!.setCheckedKeys(permiss.defaultList[role.value]);
+	tree.value!.setCheckedKeys(permiss.defaultList[val]);
 };
 </script>