vuex add namespaced

src/components/LangSelect/index.vue

@@ -27,7 +27,7 @@ export default {
   methods: {
     handleSetLanguage(lang) {
       this.$i18n.locale = lang
-      this.$store.dispatch('setLanguage', lang)
+      this.$store.dispatch('app/setLanguage', lang)
       this.$message({
         message: 'Switch Language Success',
         type: 'success'

src/components/SizeSelect/index.vue

@@ -32,7 +32,7 @@ export default {
   methods: {
     handleSetSize(size) {
       this.$ELEMENT.size = size
-      this.$store.dispatch('setSize', size)
+      this.$store.dispatch('app/setSize', size)
       this.refreshView()
       this.$message({
         message: 'Switch Size Success',
@@ -41,7 +41,7 @@ export default {
     },
     refreshView() {
       // In order to make the cached page re-rendered
-      this.$store.dispatch('delAllCachedViews', this.$route)
+      this.$store.dispatch('tagsView/delAllCachedViews', this.$route)
 
       const { fullPath } = this.$route
 

src/layout/Layout.vue

@@ -48,7 +48,7 @@ export default {
   },
   methods: {
     handleClickOutside() {
-      this.$store.dispatch('closeSideBar', { withoutAnimation: false })
+      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
     }
   }
 }

src/layout/components/Navbar.vue

@@ -75,10 +75,10 @@ export default {
   },
   methods: {
     toggleSideBar() {
-      this.$store.dispatch('toggleSideBar')
+      this.$store.dispatch('app/toggleSideBar')
     },
     async logout() {
-      await this.$store.dispatch('Logout')
+      await this.$store.dispatch('user/logout')
       // In order to re-instantiate the vue-router object to avoid bugs
       location.reload()
     }

src/layout/components/Settings/index.vue

@@ -34,7 +34,7 @@ export default {
         return this.$store.state.settings.tagsView
       },
       set(val) {
-        this.$store.dispatch('changeSetting', {
+        this.$store.dispatch('settings/changeSetting', {
           key: 'tagsView',
           value: val
         })

src/layout/components/TagsView/index.vue

@@ -106,14 +106,14 @@ export default {
       for (const tag of affixTags) {
         // Must have tag name
         if (tag.name) {
-          this.$store.dispatch('addVisitedView', tag)
+          this.$store.dispatch('tagsView/addVisitedView', tag)
         }
       }
     },
     addTags() {
       const { name } = this.$route
       if (name) {
-        this.$store.dispatch('addView', this.$route)
+        this.$store.dispatch('tagsView/addView', this.$route)
       }
       return false
     },
@@ -125,7 +125,7 @@ export default {
             this.$refs.scrollPane.moveToTarget(tag)
             // when query is different then update
             if (tag.to.fullPath !== this.$route.fullPath) {
-              this.$store.dispatch('updateVisitedView', this.$route)
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
             }
             break
           }
@@ -133,7 +133,7 @@ export default {
       })
     },
     refreshSelectedTag(view) {
-      this.$store.dispatch('delCachedView', view).then(() => {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
         const { fullPath } = view
         this.$nextTick(() => {
           this.$router.replace({
@@ -143,7 +143,7 @@ export default {
       })
     },
     closeSelectedTag(view) {
-      this.$store.dispatch('delView', view).then(({ visitedViews }) => {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
         if (this.isActive(view)) {
           this.toLastView(visitedViews)
         }
@@ -151,12 +151,12 @@ export default {
     },
     closeOthersTags() {
       this.$router.push(this.selectedTag)
-      this.$store.dispatch('delOthersViews', this.selectedTag).then(() => {
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
         this.moveToCurrentTag()
       })
     },
     closeAllTags(view) {
-      this.$store.dispatch('delAllViews').then(({ visitedViews }) => {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
         if (this.affixTags.some(tag => tag.path === view.path)) {
           return
         }

src/layout/mixin/ResizeHandler.js

@@ -7,7 +7,7 @@ export default {
   watch: {
     $route(route) {
       if (this.device === 'mobile' && this.sidebar.opened) {
-        store.dispatch('closeSideBar', { withoutAnimation: false })
+        store.dispatch('app/closeSideBar', { withoutAnimation: false })
       }
     }
   },
@@ -17,8 +17,8 @@ export default {
   mounted() {
     const isMobile = this.isMobile()
     if (isMobile) {
-      store.dispatch('toggleDevice', 'mobile')
+      store.dispatch('app/toggleDevice', 'mobile')
-      store.dispatch('closeSideBar', { withoutAnimation: true })
+      store.dispatch('app/closeSideBar', { withoutAnimation: true })
     }
   },
   methods: {
@@ -29,10 +29,10 @@ export default {
     resizeHandler() {
       if (!document.hidden) {
         const isMobile = this.isMobile()
-        store.dispatch('toggleDevice', isMobile ? 'mobile' : 'desktop')
+        store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop')
 
         if (isMobile) {
-          store.dispatch('closeSideBar', { withoutAnimation: true })
+          store.dispatch('app/closeSideBar', { withoutAnimation: true })
         }
       }
     }

src/permission.js

@@ -29,18 +29,18 @@ router.beforeEach((to, from, next) => {
       if (store.getters.roles.length === 0) {
         // 判断当前用户是否已拉取完user_info信息
         store
-          .dispatch('getInfo') // dispatch @/store/modules/user login getInfo
+          .dispatch('user/getInfo')
           .then(res => {
             // 拉取user_info
             const { roles } = res // note: roles must be a object array! such as: [{id: '1', name: 'editor'}, {id: '2', name: 'developer'}]
-            store.dispatch('generateRoutes', { roles }).then(accessRoutes => {
+            store.dispatch('permission/generateRoutes', { roles }).then(accessRoutes => {
               // 根据roles权限生成可访问的路由表
               router.addRoutes(accessRoutes) // 动态添加可访问路由表
               next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
             })
           })
           .catch(err => {
-            store.dispatch('resetToken').then(() => {
+            store.dispatch('user/resetToken').then(() => {
               Message.error(err)
               next({ path: '/' })
             })

src/store/modules/app.js

@@ -1,7 +1,6 @@
 import Cookies from 'js-cookie'
 
-const app = {
+const state = {
-  state: {
   sidebar: {
     opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
     withoutAnimation: false
@@ -9,8 +8,9 @@ const app = {
   device: 'desktop',
   language: Cookies.get('language') || 'en',
   size: Cookies.get('size') || 'medium'
-  },
+}
-  mutations: {
+
+const mutations = {
   TOGGLE_SIDEBAR: state => {
     state.sidebar.opened = !state.sidebar.opened
     state.sidebar.withoutAnimation = false
@@ -36,8 +36,9 @@ const app = {
     state.size = size
     Cookies.set('size', size)
   }
-  },
+}
-  actions: {
+
+const actions = {
   toggleSideBar({ commit }) {
     commit('TOGGLE_SIDEBAR')
   },
@@ -53,7 +54,11 @@ const app = {
   setSize({ commit }, size) {
     commit('SET_SIZE', size)
   }
-  }
 }
 
-export default app
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

src/store/modules/errorLog.js

@@ -1,17 +1,23 @@
-const errorLog = {
+
-  state: {
+const state = {
   logs: []
-  },
+}
-  mutations: {
+
+const mutations = {
   ADD_ERROR_LOG: (state, log) => {
     state.logs.push(log)
   }
-  },
+}
-  actions: {
+
+const actions = {
   addErrorLog({ commit }, log) {
     commit('ADD_ERROR_LOG', log)
   }
-  }
 }
 
-export default errorLog
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

src/store/modules/permission.js

@@ -34,18 +34,19 @@ export function filterAsyncRoutes(routes, roles) {
   return res
 }
 
-const permission = {
+const state = {
-  state: {
   routes: [],
   addRoutes: []
-  },
+}
-  mutations: {
+
+const mutations = {
   SET_ROUTES: (state, routes) => {
     state.addRoutes = routes
     state.routes = constantRoutes.concat(routes)
   }
-  },
+}
-  actions: {
+
+const actions = {
   generateRoutes({ commit }, data) {
     return new Promise(resolve => {
       const { roles } = data
@@ -59,7 +60,11 @@ const permission = {
       resolve(accessedRoutes)
     })
   }
-  }
 }
 
-export default permission
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

src/store/modules/settings.js

@@ -1,23 +1,29 @@
 import defaultSettings from '@/settings'
 const { showSettings, tagsView } = defaultSettings
 
-const settings = {
+const state = {
-  state: {
   showSettings: showSettings,
   tagsView: tagsView
-  },
+}
-  mutations: {
+
+const mutations = {
   CHANGE_SETTING: (state, { key, value }) => {
     if (state.hasOwnProperty(key)) {
       state[key] = value
     }
   }
-  },
+}
-  actions: {
+
+const actions = {
   changeSetting({ commit }, data) {
     commit('CHANGE_SETTING', data)
   }
-  }
 }
 
-export default settings
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+

src/store/modules/tagsView.js

@@ -1,9 +1,10 @@
-const tagsView = {
+
-  state: {
+const state = {
   visitedViews: [],
   cachedViews: []
-  },
+}
-  mutations: {
+
+const mutations = {
   ADD_VISITED_VIEW: (state, view) => {
     if (state.visitedViews.some(v => v.path === view.path)) return
     state.visitedViews.push(
@@ -69,9 +70,9 @@ const tagsView = {
       }
     }
   }
+}
 
-  },
+const actions = {
-  actions: {
   addView({ dispatch }, view) {
     dispatch('addVisitedView', view)
     dispatch('addCachedView', view)
@@ -155,7 +156,11 @@ const tagsView = {
   updateVisitedView({ commit }, view) {
     commit('UPDATE_VISITED_VIEW', view)
   }
-  }
 }
 
-export default tagsView
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

src/store/modules/user.js

@@ -1,16 +1,15 @@
 import { login, logout, getInfo } from '@/api/user'
 import { getToken, setToken, removeToken } from '@/utils/auth'
 
-const user = {
+const state = {
-  state: {
   token: getToken(),
   name: '',
   avatar: '',
   introduction: '',
   roles: []
-  },
+}
 
-  mutations: {
+const mutations = {
   SET_TOKEN: (state, token) => {
     state.token = token
   },
@@ -26,9 +25,9 @@ const user = {
   SET_ROLES: (state, roles) => {
     state.roles = roles
   }
-  },
+}
 
-  actions: {
+const actions = {
   // user login
   login({ commit }, userInfo) {
     const { username, password } = userInfo
@@ -73,7 +72,7 @@ const user = {
   },
 
   // user logout
-    Logout({ commit, state }) {
+  logout({ commit, state }) {
     return new Promise((resolve, reject) => {
       logout(state.token).then(() => {
         commit('SET_TOKEN', '')
@@ -99,20 +98,26 @@ const user = {
   // 动态修改权限
   changeRoles({ commit, dispatch }, role) {
     return new Promise(resolve => {
-        commit('SET_TOKEN', role)
+      const token = role + '-token'
-        setToken(role)
+      commit('SET_TOKEN', token)
-        getInfo(role).then(response => {
+      setToken(token)
-          const data = response.data
+      getInfo(token).then(response => {
-          commit('SET_ROLES', data.roles)
+        const { data } = response
-          commit('SET_NAME', data.name)
+        const { roles, name, avatar, introduction } = data
-          commit('SET_AVATAR', data.avatar)
+        commit('SET_ROLES', roles)
-          commit('SET_INTRODUCTION', data.introduction)
+        commit('SET_NAME', name)
-          dispatch('generateRoutes', data) // 动态修改权限后 重绘侧边菜单
+        commit('SET_AVATAR', avatar)
+        commit('SET_INTRODUCTION', introduction)
+        dispatch('permission/generateRoutes', data) // 动态修改权限后 重绘侧边菜单
         resolve()
       })
     })
   }
-  }
 }
 
-export default user
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

src/utils/errorLog.js

@@ -23,7 +23,7 @@ if (checkNeed()) {
   // Don't ask me why I use Vue.nextTick, it just a hack.
   // detail see https://forum.vuejs.org/t/dispatch-in-vue-config-errorhandler-has-some-problem/23500
     Vue.nextTick(() => {
-      store.dispatch('addErrorLog', {
+      store.dispatch('errorLog/addErrorLog', {
         err,
         vm,
         info,

src/utils/request.js

@@ -57,7 +57,7 @@ service.interceptors.response.use(
   //         cancelButtonText: '取消',
   //         type: 'warning'
   //       }).then(() => {
-  //         store.dispatch('resetToken').then(() => {
+  //         store.dispatch('user/resetToken').then(() => {
   //           location.reload() // 为了重新实例化vue-router对象 避免bug
   //         })
   //       })

src/views/example/components/ArticleDetail.vue

@@ -186,7 +186,7 @@ export default {
     setTagsViewTitle() {
       const title = this.lang === 'zh' ? '编辑文章' : 'Edit Article'
       const route = Object.assign({}, this.tempRoute, { title: `${title}-${this.postForm.id}` })
-      this.$store.dispatch('updateVisitedView', route)
+      this.$store.dispatch('tagsView/updateVisitedView', route)
     },
     submitForm() {
       this.postForm.display_time = parseInt(this.display_time / 1000)

src/views/i18n-demo/index.vue

@@ -110,7 +110,7 @@ export default {
       },
       set(lang) {
         this.$i18n.locale = lang
-        this.$store.dispatch('setLanguage', lang)
+        this.$store.dispatch('app/setLanguage', lang)
       }
     }
   },

src/views/login/index.vue

@@ -136,7 +136,7 @@ export default {
         if (valid) {
           this.loading = true
           // dispatch @/store/modules/user login action
-          this.$store.dispatch('login', this.loginForm).then(() => {
+          this.$store.dispatch('user/login', this.loginForm).then(() => {
             this.loading = false
             this.$router.push({ path: this.redirect || '/' })
           }).catch(() => {

src/views/permission/components/SwitchRoles.vue

@@ -22,7 +22,7 @@ export default {
         return this.roles[0]
       },
       set(val) {
-        this.$store.dispatch('changeRoles', val).then(() => {
+        this.$store.dispatch('user/changeRoles', val).then(() => {
           this.$emit('change')
         })
       }