加入“清除数据”功能

src/App.vue

@@ -99,12 +99,14 @@ export default {
         }
     },
     watch: {
+        // 路由名称
         '$route.name': {
             handler() {
                 // 切换路由时隐藏下拉菜单
                 this.showHeaderDropdown = false;
             }
         },
+        // 更新储存的设置
         'config.storage': {
             handler(obj) {
                 clearTimeout(this.debounce.saveConfig);
@@ -115,6 +117,7 @@ export default {
             },
             deep: true
         },
+        // 改变字体大小
         'config.storage.fontSize': {
             handler(value) {
                 clearTimeout(this.debounce.updateConfig);

src/views/Settings.vue

@@ -18,6 +18,14 @@
                     <el-switch v-model="config.sideMenuCollapse"></el-switch>
                 </el-form-item>
 
+                <el-form-item label="清除数据">
+                    <el-button type="danger" size="medium" @click="resetDatas('settings')">清除设置</el-button>
+                </el-form-item>
+
+                <el-form-item>
+                    <el-button type="danger" size="medium" @click="resetDatas('cache')">清除缓存</el-button>
+                </el-form-item>
+
             </el-form>
 
         </div>
@@ -37,6 +45,46 @@ export default {
         next(vm => {
             vm.utils.changeTitle('设置');
         });
+    },
+    methods: {
+        /**
+         * 清除数据
+         * 
+         * @param {string} type 清除类型（cache、settings）
+         */
+        resetDatas(type) {
+            this.$confirm('确定要清除吗？', '确认', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+
+                if (type == 'cache') {
+                    localStorage.removeItem('navLinksCache');
+                } else if (type == 'settings') {
+                    localStorage.removeItem('config');
+                } else {
+                    return
+                }
+
+                this.$notify({
+                    type: 'success',
+                    message: '已清除，2s 后自动刷新'
+                });
+
+                setTimeout(() => {
+                    location.reload();
+                }, 2000);
+
+            }).catch(() => {
+
+                this.$notify({
+                    type: 'info',
+                    message: '取消清除'
+                });
+
+            });
+        }
     }
 }
 </script>