fix #198

Author: FairyEver

src/layout/header-aside/components/header-size/index.vue

@@ -28,27 +28,6 @@ export default {
       ]
     }
   },
-  watch: {
-    // 注意 这里是关键
-    // 因为需要访问 this.$ELEMENT 所以只能在这里使用这种方式
-    value: {
-      handler (val, oldVal) {
-        // https://github.com/d2-projects/d2-admin/pull/129
-        if (oldVal) {
-          // 这个情况在已经加载完页面 用户改变了尺寸时触发
-          this.$ELEMENT.size = val
-          // 由于已经加载过设置 需要清空缓存设置
-          this.pageKeepAliveClean()
-          // 由于已经加载过设置 需要刷新此页面
-          this.$router.replace('/refresh')
-        } else {
-          // 这个情况在刷新页面时触发
-          this.$ELEMENT.size = val
-        }
-      },
-      immediate: true
-    }
-  },
   methods: {
     ...mapMutations({
       pageKeepAliveClean: 'd2admin/page/keepAliveClean'

src/router/index.js

@@ -23,7 +23,17 @@ const router = new VueRouter({
  * 路由拦截
  * 权限验证
  */
-router.beforeEach((to, from, next) => {
+router.beforeEach(async (to, from, next) => {
+  // 等待数据加载 https://github.com/d2-projects/d2-admin/issues/201
+  await new Promise (resolve => {
+    const timer = setInterval(() => {
+      if (store.state.d2admin.page.openedLoaded) {
+        resolve(clearInterval(timer))
+      }
+    }, 10)
+  })
+  // 等待加载组件尺寸 https://github.com/d2-projects/d2-admin/issues/198
+  await store.dispatch('d2admin/size/isLoaded')
   // 进度条
   NProgress.start()
   // 关闭搜索面板
@@ -55,17 +65,9 @@ router.beforeEach((to, from, next) => {
 
 
 
-router.afterEach(async to => {
+router.afterEach(to => {
   // 进度条
   NProgress.done()
-  // 等待数据加载 https://github.com/d2-projects/d2-admin/issues/201
-  await new Promise (resolve => {
-    const timer = setInterval(() => {
-      if (store.state.d2admin.page.openedLoaded) {
-        resolve(clearInterval(timer))
-      }
-    }, 10)
-  })
   // 多页控制 打开新的页面
   store.dispatch('d2admin/page/open', to)
   // 更改标题

src/store/modules/d2admin/modules/size.js

@@ -1,10 +1,37 @@
+import Vue from 'vue'
+import router from '@/router'
+
 export default {
   namespaced: true,
   state: {
     // 尺寸
     value: '' // medium small mini
   },
   actions: {
+    /**
+     * @description 将当前的设置应用到 element
+     * @param {Boolean} refresh 是否在设置之后刷新页面
+     */
+    apply ({ state, commit }, refresh) {
+      Vue.prototype.$ELEMENT.size = state.value
+      if (refresh) {
+        commit('d2admin/page/keepAliveClean', null, { root: true })
+        router.replace('/refresh')
+      }
+    },
+    /**
+     * @description 确认组件尺寸已经加载 https://github.com/d2-projects/d2-admin/issues/198
+     */
+    isLoaded ({ state }) {
+      if (state.value) return Promise.resolve()
+      return new Promise(resolve => {
+        const timer = setInterval(() => {
+          if (state.value) {
+            resolve(clearInterval(timer))
+          }
+        }, 10)
+      })
+    },
     /**
      * @description 设置尺寸
      * @param {Object} state vuex state
@@ -14,6 +41,8 @@ export default {
       return new Promise(async resolve => {
         // store 赋值
         state.value = size
+        // 应用
+        dispatch('apply', true)
         // 持久化
         await dispatch('d2admin/db/set', {
           dbName: 'sys',
@@ -38,6 +67,8 @@ export default {
           defaultValue: 'default',
           user: true
         }, { root: true })
+        // 应用
+        dispatch('apply')
         // end
         resolve()
       })