Merge branch 'hotfix/vuex'

Former-commit-id: 3b51cbb060607f08e9263ef654d0748256bf3387 [formerly 3b51cbb060607f08e9263ef654d0748256bf3387 [formerly 3b51cbb060607f08e9263ef654d0748256bf3387 [formerly 3b51cbb060607f08e9263ef654d0748256bf3387 [formerly dfadfbfa308b8f50a148a094f8e16d41c1921333 [formerly 540551128ffd9b5c873eaaffe248fc62f36fc16e]]]]]
Former-commit-id: 4ec0bc0abf046d80ca4c2c72553af6ed46586388
Former-commit-id: 2600d95da4cd4aa9f23f8de95bc79af5a3f8db67
Former-commit-id: eda122a957232ae530c00cbc291ad287160295ee [formerly 808cb7d9917308326ac98807502dda4aa2a68afd]
Former-commit-id: a862b92b9d99047086998b670c8852e7d126f4c9
Former-commit-id: 721eac99b45b2de0431edf0a405b6a4bad03c371
Former-commit-id: b2c0f248c59da3dca441186373afdf25d440bb9a
Former-commit-id: 6ddd242d5dcb9fa856265a02fb765ba73d3b18e4
Former-commit-id: c88bb6c6a0db48f6f7a7c1ba382cf4abab98cb77

package-lock.json.REMOVED.git-id

@@ -1 +1 @@
-4d463a54f93007210c2e07a05d8f012c386a0023
+b322c0027c15926f73f03ec142269e3512c5cc14

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

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import { mapState, mapMutations } from 'vuex'
+import { mapState, mapActions } from 'vuex'
 export default {
   computed: {
     ...mapState('d2admin/fullscreen', [
@@ -19,7 +19,7 @@ export default {
     ])
   },
   methods: {
-    ...mapMutations('d2admin/fullscreen', [
+    ...mapActions('d2admin/fullscreen', [
       'toggle'
     ])
   }

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

@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import { mapState, mapMutations } from 'vuex'
+import { mapState, mapMutations, mapActions } from 'vuex'
 export default {
   name: 'd2-header-size',
   computed: {
@@ -51,9 +51,11 @@ export default {
   },
   methods: {
     ...mapMutations({
-      sizeSet: 'd2admin/size/set',
       pageKeepAliveClean: 'd2admin/page/keepAliveClean'
     }),
+    ...mapActions({
+      sizeSet: 'd2admin/size/set'
+    }),
     handleChange (value) {
       this.sizeSet(value)
     },

src/layout/header-aside/components/header-theme/components/d2-theme-list/index.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { mapState, mapMutations } from 'vuex'
+import { mapState, mapActions } from 'vuex'
 export default {
   name: 'd2-theme-list',
   data () {
@@ -36,7 +36,7 @@ export default {
     ])
   },
   methods: {
-    ...mapMutations('d2admin/theme', [
+    ...mapActions('d2admin/theme', [
       'set'
     ]),
     handleSelectTheme (name) {

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

@@ -59,7 +59,7 @@
 </template>
 
 <script>
-import { mapState, mapMutations } from 'vuex'
+import { mapState, mapActions } from 'vuex'
 export default {
   components: {
     D2Contextmenu: () => import('../contextmenu'),
@@ -89,7 +89,7 @@ export default {
     ])
   },
   methods: {
-    ...mapMutations('d2admin/page', [
+    ...mapActions('d2admin/page', [
       'close',
       'closeLeft',
       'closeRight',
@@ -101,7 +101,6 @@ export default {
      */
     handleContextmenu (event) {
       let target = event.target
-
       // 解决 https://github.com/d2-projects/d2-admin/issues/54
       let flag = false
       if (target.className.indexOf('el-tabs__item') > -1) flag = true
@@ -109,7 +108,6 @@ export default {
         target = target.parentNode
         flag = true
       }
-
       if (flag) {
         event.preventDefault()
         event.stopPropagation()

src/layout/header-aside/layout.vue

@@ -80,7 +80,7 @@
 </template>
 
 <script>
-import { mapState, mapGetters, mapMutations } from 'vuex'
+import { mapState, mapGetters, mapActions } from 'vuex'
 import mixinSearch from './mixins/search'
 export default {
   name: 'd2-layout-header-aside',
@@ -128,14 +128,14 @@ export default {
     }
   },
   methods: {
-    ...mapMutations({
+    ...mapActions('d2admin/menu', [
-      menuAsideCollapseToggle: 'd2admin/menu/asideCollapseToggle'
+      'asideCollapseToggle'
-    }),
+    ]),
     /**
      * 接收点击切换侧边栏的按钮
      */
     handleToggleAside () {
-      this.menuAsideCollapseToggle()
+      this.asideCollapseToggle()
     }
   }
 }

src/main.js

@@ -62,11 +62,11 @@ new Vue({
     // 检查最新版本
     this.$store.dispatch('d2admin/releases/checkUpdate')
     // 用户登录后从数据库加载一系列的设置
-    this.$store.commit('d2admin/account/load')
+    this.$store.dispatch('d2admin/account/load')
     // 获取并记录用户 UA
     this.$store.commit('d2admin/ua/get')
     // 初始化全屏监听
-    this.$store.commit('d2admin/fullscreen/listen')
+    this.$store.dispatch('d2admin/fullscreen/listen')
   },
   watch: {
     // 监听路由 控制侧边栏显示

src/pages/demo/playground/store/size/index.vue

@@ -1,6 +1,6 @@
 <template>
   <d2-container type="card">
-    <el-radio-group v-model="currentValue" @change="sizeSet">
+    <el-radio-group v-model="currentValue" @change="set">
       <el-radio-button label="default"></el-radio-button>
       <el-radio-button label="medium"></el-radio-button>
       <el-radio-button label="small"></el-radio-button>
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import { mapState, mapMutations } from 'vuex'
+import { mapState, mapActions } from 'vuex'
 export default {
   data () {
     return {
@@ -31,9 +31,9 @@ export default {
     }
   },
   methods: {
-    ...mapMutations({
+    ...mapActions('d2admin/size', [
-      sizeSet: 'd2admin/size/set'
+      'set'
-    })
+    ])
   }
 }
 </script>

src/pages/demo/playground/store/theme/index.vue

@@ -31,7 +31,7 @@
 </template>
 
 <script>
-import { mapState, mapMutations } from 'vuex'
+import { mapState, mapActions } from 'vuex'
 export default {
   data () {
     return {
@@ -48,7 +48,7 @@ export default {
     ])
   },
   methods: {
-    ...mapMutations('d2admin/theme', [
+    ...mapActions('d2admin/theme', [
       'set'
     ]),
     handleSelectTheme (name) {

src/pages/demo/playground/store/transition/index.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import { mapState, mapMutations } from 'vuex'
+import { mapState, mapActions } from 'vuex'
 export default {
   computed: {
     ...mapState('d2admin/transition', [
@@ -18,7 +18,7 @@ export default {
     ])
   },
   methods: {
-    ...mapMutations('d2admin/transition', [
+    ...mapActions('d2admin/transition', [
       'set'
     ])
   }

src/router/index.js

@@ -57,7 +57,7 @@ router.afterEach(to => {
   const app = router.app
   const { name, params, query } = to
   // 多页控制 打开新的页面
-  app.$store.commit('d2admin/page/open', { name, params, query })
+  app.$store.dispatch('d2admin/page/open', { name, params, query })
   // 更改标题
   util.title(to.meta.title)
 })

src/store/modules/d2admin/modules/account.js

@@ -12,9 +12,7 @@ export default {
      * @param {Object} param password {String} 密码
      * @param {Object} param route {Object} 登录成功后定向的路由对象
      */
-    login ({
+    login ({ dispatch }, {
-      commit
-    }, {
       vm,
       username,
       password,
@@ -27,7 +25,7 @@ export default {
         username,
         password
       })
-        .then(res => {
+        .then(async res => {
           // 设置 cookie 一定要存 uuid 和 token 两个 cookie
           // 整个系统依赖这两个数据进行校验和存储
           // uuid 是用户身份唯一标识 用户注册的时候确定 并且不可改变 不可重复
@@ -36,11 +34,11 @@ export default {
           util.cookies.set('uuid', res.uuid)
           util.cookies.set('token', res.token)
           // 设置 vuex 用户信息
-          commit('d2admin/user/set', {
+          await dispatch('d2admin/user/set', {
             name: res.name
           }, { root: true })
           // 用户登录后从持久化数据加载一系列的设置
-          commit('load')
+          await dispatch('load')
           // 更新路由 尝试去获取 cookie 里保存的需要重定向的页面完整地址
           const path = util.cookies.get('redirect')
           // 根据是否存有重定向页面判断如何重定向
@@ -49,9 +47,7 @@ export default {
           util.cookies.remove('redirect')
         })
         .catch(err => {
-          console.group('登录结果')
           console.log('err: ', err)
-          console.groupEnd()
         })
     },
     /**
@@ -92,26 +88,28 @@ export default {
       } else {
         logout()
       }
-    }
+    },
-  },
-  mutations: {
     /**
      * @description 用户登录后从持久化数据加载一系列的设置
      * @param {Object} state vuex state
      */
-    load (state) {
+    load ({ commit, dispatch }) {
-      // DB -> store 加载用户名
+      return new Promise(async resolve => {
-      this.commit('d2admin/user/load')
+        // DB -> store 加载用户名
-      // DB -> store 加载主题
+        await dispatch('d2admin/user/load', null, { root: true })
-      this.commit('d2admin/theme/load')
+        // DB -> store 加载主题
-      // DB -> store 加载页面过渡效果设置
+        await dispatch('d2admin/theme/load', null, { root: true })
-      this.commit('d2admin/transition/load')
+        // DB -> store 加载页面过渡效果设置
-      // DB -> store 持久化数据加载上次退出时的多页列表
+        await dispatch('d2admin/transition/load', null, { root: true })
-      this.commit('d2admin/page/openedLoad')
+        // DB -> store 持久化数据加载上次退出时的多页列表
-      // DB -> store 持久化数据加载侧边栏折叠状态
+        await dispatch('d2admin/page/openedLoad', null, { root: true })
-      this.commit('d2admin/menu/asideCollapseLoad')
+        // DB -> store 持久化数据加载侧边栏折叠状态
-      // DB -> store 持久化数据加载全局尺寸
+        await dispatch('d2admin/menu/asideCollapseLoad', null, { root: true })
-      this.commit('d2admin/size/load')
+        // DB -> store 持久化数据加载全局尺寸
+        await dispatch('d2admin/size/load', null, { root: true })
+        // end
+        resolve()
+      })
     }
   }
 }

src/store/modules/d2admin/modules/fullscreen.js

@@ -6,31 +6,42 @@ export default {
     // 全屏激活
     active: false
   },
-  mutations: {
+  actions: {
     /**
      * @description 初始化监听
      */
-    listen () {
+    listen ({ commit }) {
-      if (screenfull.enabled) {
+      return new Promise(resolve => {
-        screenfull.on('change', () => {
+        if (screenfull.enabled) {
-          if (!screenfull.isFullscreen) {
+          screenfull.on('change', () => {
-            this.commit('d2admin/fullscreen/set', false)
+            console.log('1')
-          }
+            if (!screenfull.isFullscreen) {
-        })
+              commit('set', false)
-      }
+            }
+          })
+        }
+        // end
+        resolve()
+      })
     },
     /**
      * @description 切换全屏
      */
-    toggle () {
+    toggle ({ commit }) {
-      if (screenfull.isFullscreen) {
+      return new Promise(resolve => {
-        screenfull.exit()
+        if (screenfull.isFullscreen) {
-        this.commit('d2admin/fullscreen/set', false)
+          screenfull.exit()
-      } else {
+          commit('set', false)
-        screenfull.request()
+        } else {
-        this.commit('d2admin/fullscreen/set', true)
+          screenfull.request()
-      }
+          commit('set', true)
-    },
+        }
+        // end
+        resolve()
+      })
+    }
+  },
+  mutations: {
     /**
      * @description 设置 store 里的全屏状态
      * @param {Object} state vuex state

src/store/modules/d2admin/modules/log.js

@@ -24,16 +24,6 @@ export default {
       return state.list.filter(l => l.type === 'error').length
     }
   },
-  mutations: {
-    /**
-     * @description 清空日志
-     * @param {Object} state vuex state
-     */
-    clean (state) {
-      // store 赋值
-      state.list = []
-    }
-  },
   actions: {
     /**
      * @description 添加一个日志
@@ -70,5 +60,15 @@ export default {
         info: toString(info)
       }))
     }
+  },
+  mutations: {
+    /**
+     * @description 清空日志
+     * @param {Object} state vuex state
+     */
+    clean (state) {
+      // store 赋值
+      state.list = []
+    }
   }
 }

src/store/modules/d2admin/modules/menu.js

@@ -11,6 +11,64 @@ export default {
     // 侧边栏收缩
     asideCollapse: setting.menu.asideCollapse
   },
+  actions: {
+    /**
+     * 设置侧边栏展开或者收缩
+     * @param {Object} state vuex state
+     * @param {Boolean} collapse is collapse
+     */
+    asideCollapseSet ({ state, dispatch }, collapse) {
+      return new Promise(async resolve => {
+        // store 赋值
+        state.asideCollapse = collapse
+        // 持久化
+        await dispatch('d2admin/db/set', {
+          dbName: 'sys',
+          path: 'menu.asideCollapse',
+          value: state.asideCollapse,
+          user: true
+        }, { root: true })
+        // end
+        resolve()
+      })
+    },
+    /**
+     * 切换侧边栏展开和收缩
+     * @param {Object} state vuex state
+     */
+    asideCollapseToggle ({ state, dispatch }) {
+      return new Promise(async resolve => {
+        // store 赋值
+        state.asideCollapse = !state.asideCollapse
+        // 持久化
+        await dispatch('d2admin/db/set', {
+          dbName: 'sys',
+          path: 'menu.asideCollapse',
+          value: state.asideCollapse,
+          user: true
+        }, { root: true })
+        // end
+        resolve()
+      })
+    },
+    /**
+     * 从持久化数据读取侧边栏展开或者收缩
+     * @param {Object} state vuex state
+     */
+    asideCollapseLoad ({ state, dispatch }) {
+      return new Promise(async resolve => {
+        // store 赋值
+        state.asideCollapse = await dispatch('d2admin/db/get', {
+          dbName: 'sys',
+          path: 'menu.asideCollapse',
+          defaultValue: setting.menu.asideCollapse,
+          user: true
+        }, { root: true })
+        // end
+        resolve()
+      })
+    }
+  },
   mutations: {
     /**
      * @description 设置顶栏菜单
@@ -29,50 +87,6 @@ export default {
     asideSet (state, menu) {
       // store 赋值
       state.aside = menu
-    },
-    /**
-     * 设置侧边栏展开或者收缩
-     * @param {Object} state vuex state
-     * @param {Boolean} collapse is collapse
-     */
-    asideCollapseSet (state, collapse) {
-      // store 赋值
-      state.asideCollapse = collapse
-      // 持久化
-      this.dispatch('d2admin/db/set', {
-        dbName: 'sys',
-        path: 'menu.asideCollapse',
-        value: state.asideCollapse,
-        user: true
-      })
-    },
-    /**
-     * 切换侧边栏展开和收缩
-     * @param {Object} state vuex state
-     */
-    asideCollapseToggle (state) {
-      // store 赋值
-      state.asideCollapse = !state.asideCollapse
-      // 持久化
-      this.dispatch('d2admin/db/set', {
-        dbName: 'sys',
-        path: 'menu.asideCollapse',
-        value: state.asideCollapse,
-        user: true
-      })
-    },
-    /**
-     * 从持久化数据读取侧边栏展开或者收缩
-     * @param {Object} state vuex state
-     */
-    async asideCollapseLoad (state) {
-      // store 赋值
-      state.asideCollapse = await this.dispatch('d2admin/db/get', {
-        dbName: 'sys',
-        path: 'menu.asideCollapse',
-        defaultValue: setting.menu.asideCollapse,
-        user: true
-      })
     }
   }
 }

src/store/modules/d2admin/modules/page.js.REMOVED.git-id

@@ -1 +1 @@
-9abf067fc9ee38d5c28f4b1450b9df450c2583bc
+3cac6fb289611555b60a92937c3b5ba99e7b9ec1

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

@@ -4,34 +4,42 @@ export default {
     // 尺寸
     value: '' // medium small mini
   },
-  mutations: {
+  actions: {
     /**
      * @description 设置尺寸
      * @param {Object} state vuex state
      * @param {String} size 尺寸
      */
-    set (state, size) {
+    set ({ state, dispatch }, size) {
-      // store 赋值
+      return new Promise(async resolve => {
-      state.value = size
+        // store 赋值
-      // 持久化
+        state.value = size
-      this.dispatch('d2admin/db/set', {
+        // 持久化
-        dbName: 'sys',
+        await dispatch('d2admin/db/set', {
-        path: 'size.value',
+          dbName: 'sys',
-        value: state.value,
+          path: 'size.value',
-        user: true
+          value: state.value,
+          user: true
+        }, { root: true })
+        // end
+        resolve()
       })
     },
     /**
      * @description 从持久化数据读取尺寸设置
      * @param {Object} state vuex state
      */
-    async load (state) {
+    load ({ state, dispatch }) {
-      // store 赋值
+      return new Promise(async resolve => {
-      state.value = await this.dispatch('d2admin/db/get', {
+        // store 赋值
-        dbName: 'sys',
+        state.value = await dispatch('d2admin/db/get', {
-        path: 'size.value',
+          dbName: 'sys',
-        defaultValue: 'default',
+          path: 'size.value',
-        user: true
+          defaultValue: 'default',
+          user: true
+        }, { root: true })
+        // end
+        resolve()
       })
     }
   }

src/store/modules/d2admin/modules/theme.js

@@ -18,40 +18,50 @@ export default {
       return state.list.find(theme => theme.name === state.activeName)
     }
   },
-  mutations: {
+  actions: {
     /**
      * @description 激活一个主题
      * @param {Object} state vuex state
      * @param {String} themeValue 需要激活的主题名称
      */
-    set (state, themeName) {
+    set ({ state, commit, dispatch }, themeName) {
-      // 检查这个主题在主题列表里是否存在
+      return new Promise(async resolve => {
-      state.activeName = state.list.find(e => e.name === themeName) ? themeName : state.list[0].name
+        // 检查这个主题在主题列表里是否存在
-      // 将 vuex 中的主题应用到 dom
+        state.activeName = state.list.find(e => e.name === themeName) ? themeName : state.list[0].name
-      this.commit('d2admin/theme/dom')
+        // 将 vuex 中的主题应用到 dom
-      // 持久化
+        commit('dom')
-      this.dispatch('d2admin/db/set', {
+        // 持久化
-        dbName: 'sys',
+        await dispatch('d2admin/db/set', {
-        path: 'theme.activeName',
+          dbName: 'sys',
-        value: state.activeName,
+          path: 'theme.activeName',
-        user: true
+          value: state.activeName,
+          user: true
+        }, { root: true })
+        // end
+        resolve()
       })
     },
     /**
      * @description 从持久化数据加载主题设置
      * @param {Object} state vuex state
      */
-    async load (state) {
+    load ({ state, commit, dispatch }) {
-      // store 赋值
+      return new Promise(async resolve => {
-      state.activeName = await this.dispatch('d2admin/db/get', {
+        // store 赋值
-        dbName: 'sys',
+        state.activeName = await dispatch('d2admin/db/get', {
-        path: 'theme.activeName',
+          dbName: 'sys',
-        defaultValue: state.list[0].name,
+          path: 'theme.activeName',
-        user: true
+          defaultValue: state.list[0].name,
+          user: true
+        }, { root: true })
+        // 将 vuex 中的主题应用到 dom
+        commit('dom')
+        // end
+        resolve()
       })
-      // 更新到页面
+    }
-      this.commit('d2admin/theme/dom')
+  },
-    },
+  mutations: {
     /**
      * @description 将 vuex 中的主题应用到 dom
      * @param {Object} state vuex state

src/store/modules/d2admin/modules/transition.js

@@ -7,34 +7,42 @@ export default {
     // 是否开启页面过度动画
     active: setting.transition.active
   },
-  mutations: {
+  actions: {
     /**
      * @description 设置开启状态
      * @param {Object} state vuex state
      * @param {Boolean} active 新的状态
      */
-    set (state, active) {
+    set ({ state, dispatch }, active) {
-      // store 赋值
+      return new Promise(async resolve => {
-      state.active = active
+        // store 赋值
-      // 持久化
+        state.active = active
-      this.dispatch('d2admin/db/set', {
+        // 持久化
-        dbName: 'sys',
+        await dispatch('d2admin/db/set', {
-        path: 'transition.active',
+          dbName: 'sys',
-        value: state.active,
+          path: 'transition.active',
-        user: true
+          value: state.active,
+          user: true
+        }, { root: true })
+        // end
+        resolve()
       })
     },
     /**
      * 从数据库读取页面过渡动画设置
      * @param {Object} state vuex state
      */
-    async load (state) {
+    load ({ state, dispatch }) {
-      // store 赋值
+      return new Promise(async resolve => {
-      state.active = await this.dispatch('d2admin/db/get', {
+        // store 赋值
-        dbName: 'sys',
+        state.active = await dispatch('d2admin/db/get', {
-        path: 'transition.active',
+          dbName: 'sys',
-        defaultValue: setting.transition.active,
+          path: 'transition.active',
-        user: true
+          defaultValue: setting.transition.active,
+          user: true
+        }, { root: true })
+        // end
+        resolve()
       })
     }
   }

src/store/modules/d2admin/modules/user.js

@@ -7,34 +7,42 @@ export default {
     // 用户信息
     info: setting.user.info
   },
-  mutations: {
+  actions: {
     /**
      * @description 设置用户数据
      * @param {Object} state vuex state
      * @param {*} info info
      */
-    set (state, info) {
+    set ({ state, dispatch }, info) {
-      // store 赋值
+      return new Promise(async resolve => {
-      state.info = info
+        // store 赋值
-      // 持久化
+        state.info = info
-      this.dispatch('d2admin/db/set', {
+        // 持久化
-        dbName: 'sys',
+        await dispatch('d2admin/db/set', {
-        path: 'user.info',
+          dbName: 'sys',
-        value: info,
+          path: 'user.info',
-        user: true
+          value: info,
+          user: true
+        }, { root: true })
+        // end
+        resolve()
       })
     },
     /**
      * @description 从数据库取用户数据
      * @param {Object} state vuex state
      */
-    async load (state) {
+    load ({ state, dispatch }) {
-      // store 赋值
+      return new Promise(async resolve => {
-      state.info = await this.dispatch('d2admin/db/get', {
+        // store 赋值
-        dbName: 'sys',
+        state.info = await dispatch('d2admin/db/get', {
-        path: 'user.info',
+          dbName: 'sys',
-        defaultValue: setting.user.info,
+          path: 'user.info',
-        user: true
+          defaultValue: setting.user.info,
+          user: true
+        }, { root: true })
+        // end
+        resolve()
       })
     }
   }