使用Pinia代替Vuex进行数据存储

2022-06-11 10:33:49 +08:00
parent ef604d008d
commit 859f8acfe2
41 changed files with 700 additions and 797 deletions
@@ -1,25 +0,0 @@
-const getters = {
-  sidebar: state => state.app.sidebar,
-  size: state => state.app.size,
-  device: state => state.app.device,
-  language: state => state.app.lang,
-  visitedViews: state => state.tagsView.visitedViews,
-  cachedViews: state => state.tagsView.cachedViews,
-  token: state => state.user.token,
-  avatar: state => state.user.avatar,
-  name: state => state.user.name,
-  userId: state => state.user.userInfo.userId,
-  introduction: state => state.user.introduction,
-  roles: state => state.user.roles,
-  permissions: state => state.user.permissions,
-  permission_routes: state => state.permission.routes,
-  userinfo: state => state.user.userInfo,
-  topbarRouters: state => state.permission.topbarRouters,
-  defaultRoutes: state => state.permission.defaultRoutes,
-  sidebarRouters: state => state.permission.sidebarRouters,
-  onlineUserNum: state => state.socket.onlineNum,
-  noticeList: state => state.socket.noticeList,
-  noticeDot: state => state.socket.noticeList.length > 0,
-  onlineUsers: state => state.socket.onlineUsers
-}
-export default getters
@@ -1,23 +1,3 @@
-import { createStore } from 'vuex'
-import app from './modules/app'
-import user from './modules/user'
-import tagsView from './modules/tagsView'
-import permission from './modules/permission'
-import settings from './modules/settings'
-import getters from './getters'
-import socket from './modules/socket'
-
-const store = createStore({
-  modules: {
-    app,
-    user,
-    tagsView,
-    permission,
-    settings,
-    socket
-  },
-  getters
-});
-
+const store = createPinia()

 export default store
@@ -1,75 +1,122 @@
 import Cookies from 'js-cookie'

-const state = {
-  sidebar: {
-    opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
-    withoutAnimation: false,
-    hide: false
-  },
-  device: 'desktop',
-  size: Cookies.get('size') || 'small',
-  lang: Cookies.get('lang') || 'zh-cn'
-}
+// const state = {
+//   sidebar: {
+//     opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
+//     withoutAnimation: false,
+//     hide: false
+//   },
+//   device: 'desktop',
+//   size: Cookies.get('size') || 'small',
+//   lang: Cookies.get('lang') || 'zh-cn'
+// }

-const mutations = {
-  TOGGLE_SIDEBAR: state => {
-    if (state.sidebar.hide) {
-      return false;
-    }
-    state.sidebar.opened = !state.sidebar.opened
-    state.sidebar.withoutAnimation = true
+// const mutations = {
+//   TOGGLE_SIDEBAR: state => {
+//     if (state.sidebar.hide) {
+//       return false;
+//     }
+//     state.sidebar.opened = !state.sidebar.opened
+//     state.sidebar.withoutAnimation = true

-    if (state.sidebar.opened) {
-      Cookies.set('sidebarStatus', 1)
-    } else {
+//     if (state.sidebar.opened) {
+//       Cookies.set('sidebarStatus', 1)
+//     } else {
+//       Cookies.set('sidebarStatus', 0)
+//     }
+//   },
+//   CLOSE_SIDEBAR: (state, withoutAnimation) => {
+//     Cookies.set('sidebarStatus', 0)
+//     state.sidebar.opened = false
+//     state.sidebar.withoutAnimation = withoutAnimation
+//   },
+//   TOGGLE_DEVICE: (state, device) => {
+//     state.device = device
+//   },
+//   SET_SIZE: (state, size) => {
+//     state.size = size
+//     Cookies.set('size', size)
+//   },
+//   SET_SIDEBAR_HIDE: (state, status) => {
+//     state.sidebar.hide = status
+//   },
+//   SET_LANG: (state, lang) => {
+//     state.lang = lang
+//     Cookies.set('lang', lang)
+//   },
+// }
+
+// const actions = {
+//   toggleSideBar({ commit }) {
+//     commit('TOGGLE_SIDEBAR')
+//   },
+//   closeSideBar({ commit }) {
+//     commit('CLOSE_SIDEBAR', '')
+//   },
+//   toggleDevice({ commit }, device) {
+//     commit('TOGGLE_DEVICE', device)
+//   },
+//   setSize({ commit }, size) {
+//     commit('SET_SIZE', size)
+//   },
+//   toggleSideBarHide({ commit }, status) {
+//     commit('SET_SIDEBAR_HIDE', status)
+//   },
+//   setLang({ commit }, lang) {
+//     commit('SET_LANG', lang)
+//   },
+// }
+
+// export default {
+//   namespaced: true,
+//   state,
+//   mutations,
+//   actions
+// }
+const useAppStore = defineStore('app', {
+  state: () => ({
+    sidebar: {
+      opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
+      withoutAnimation: false,
+      hide: false
+    },
+    device: 'desktop',
+    size: Cookies.get('size') || 'small',
+    lang: Cookies.get('lang') || 'zh-cn'
+  }),
+  actions: {
+    toggleSideBar(withoutAnimation) {
+      if (this.sidebar.hide) {
+        return false
+      }
+      this.sidebar.opened = !this.sidebar.opened
+      this.sidebar.withoutAnimation = withoutAnimation
+      if (this.sidebar.opened) {
+        Cookies.set('sidebarStatus', 1)
+      } else {
+        Cookies.set('sidebarStatus', 0)
+      }
+    },
+    closeSideBar(withoutAnimation) {
      Cookies.set('sidebarStatus', 0)
+      this.sidebar.opened = false
+      this.sidebar.withoutAnimation = withoutAnimation
+    },
+    toggleDevice(device) {
+      this.device = device
+    },
+    setSize(size) {
+      this.size = size;
+      Cookies.set('size', size)
+    },
+    toggleSideBarHide(status) {
+      this.sidebar.hide = status
+    },
+    setLang(lang) {
+      this.lang = lang
+      Cookies.set('lang', lang)
    }
-  },
-  CLOSE_SIDEBAR: (state, withoutAnimation) => {
-    Cookies.set('sidebarStatus', 0)
-    state.sidebar.opened = false
-    state.sidebar.withoutAnimation = withoutAnimation
-  },
-  TOGGLE_DEVICE: (state, device) => {
-    state.device = device
-  },
-  SET_SIZE: (state, size) => {
-    state.size = size
-    Cookies.set('size', size)
-  },
-  SET_SIDEBAR_HIDE: (state, status) => {
-    state.sidebar.hide = status
-  },
-  SET_LANG: (state, lang) => {
-    state.lang = lang
-    Cookies.set('lang', lang)
-  },
-}
+  }
+})

-const actions = {
-  toggleSideBar({ commit }) {
-    commit('TOGGLE_SIDEBAR')
-  },
-  closeSideBar({ commit }) {
-    commit('CLOSE_SIDEBAR', '')
-  },
-  toggleDevice({ commit }, device) {
-    commit('TOGGLE_DEVICE', device)
-  },
-  setSize({ commit }, size) {
-    commit('SET_SIZE', size)
-  },
-  toggleSideBarHide({ commit }, status) {
-    commit('SET_SIDEBAR_HIDE', status)
-  },
-  setLang({ commit }, lang) {
-    commit('SET_LANG', lang)
-  },
-}
-
-export default {
-  namespaced: true,
-  state,
-  mutations,
-  actions
-}
+export default useAppStore
@@ -8,30 +8,29 @@ import InnerLink from '@/layout/components/InnerLink'
 const modules =
  import.meta.glob('./../../views/**/*.vue')

-const permission = {
-  state: {
+const usePermissionStore = defineStore('permission', {
+  state: () => ({
    routes: [],
    defaultRoutes: [],
    topbarRouters: [],
-		sidebarRouters: []
-  },
-  mutations: {
-    SET_ROUTES: (state, routes) => {
-			state.routes = constantRoutes.concat(routes)
-    },
-    SET_DEFAULT_ROUTES: (state, routes) => {
-      state.defaultRoutes = constantRoutes.concat(routes)
-    },
-    SET_TOPBAR_ROUTES: (state, routes) => {
-      state.topbarRouters = routes
-    },
-    SET_SIDEBAR_ROUTERS: (state, routes) => {
-      state.sidebarRouters = routes
-    },
-  },
+    sidebarRouters: []
+  }),
  actions: {
+    setRoutes(routes) {
+      this.addRoutes = routes
+      this.routes = constantRoutes.concat(routes)
+    },
+    setDefaultRoutes(routes) {
+      this.defaultRoutes = constantRoutes.concat(routes)
+    },
+    setTopbarRoutes(routes) {
+      this.topbarRouters = routes
+    },
+    setSidebarRouters(routes) {
+      this.sidebarRouters = routes
+    },
    // 生成路由
-    GenerateRoutes({ commit }) {
+    generateRoutes() {
      return new Promise(resolve => {
        // 向后端请求路由数据
        getRouters().then(res => {
@@ -41,16 +40,16 @@ const permission = {
          const sidebarRoutes = filterAsyncRouter(sdata)
          const rewriteRoutes = filterAsyncRouter(rdata, false, true)
          //const defaultRoutes = filterAsyncRouter(defaultData)
-          commit('SET_ROUTES', rewriteRoutes)
-          commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes))
-          commit('SET_DEFAULT_ROUTES', sidebarRoutes)
-          commit('SET_TOPBAR_ROUTES', sidebarRoutes)
+          this.setRoutes(rewriteRoutes)
+          this.setSidebarRouters(constantRoutes.concat(sidebarRoutes))
+          this.setDefaultRoutes(sidebarRoutes)
+          this.setTopbarRoutes(sidebarRoutes)
          resolve(rewriteRoutes)
        })
      })
    }
  }
-}
+})

 // 遍历后台传来的路由字符串，转换为组件对象
 function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
@@ -117,4 +116,4 @@ export const loadView = (view) => {
  return res;
 }

-export default permission
+export default usePermissionStore
@@ -4,41 +4,58 @@ import { useDynamicTitle } from '@/utils/dynamicTitle'
 const { sideTheme, theme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo, dynamicTitle, showFooter } = defaultSettings

 const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || ''
-const state = {
-  title: '',
-  theme: storageSetting.theme || theme,
-  sideTheme: storageSetting.sideTheme || sideTheme,
-  showSettings: showSettings,
-  topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav,
-  tagsView: storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView,
-  fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader,
-  sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo,
-  dynamicTitle: storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle,
-  showFooter: storageSetting.showFooter === undefined ? showFooter : storageSetting.showFooter
-}
-const mutations = {
-  CHANGE_SETTING: (state, { key, value }) => {
-    if (state.hasOwnProperty(key)) {
-      state[key] = value
+const useSettingsStore = defineStore('settings', {
+  state: () => ({
+    title: '',
+    theme: storageSetting.theme || theme,
+    sideTheme: storageSetting.sideTheme || sideTheme,
+    showSettings: showSettings,
+    topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav,
+    tagsView: storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView,
+    fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader,
+    sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo,
+    dynamicTitle: storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle,
+    showFooter: storageSetting.showFooter === undefined ? showFooter : storageSetting.showFooter
+  }),
+  actions: {
+    // 修改布局设置
+    changeSetting(data) {
+      const { key, value } = data
+      if (this.hasOwnProperty(key)) {
+        this[key] = value
+      }
+    },
+    // 设置网页标题
+    setTitle(title) {
+      this.title = title
+      useDynamicTitle();
    }
  }
-}
+})
+export default useSettingsStore
+// const mutations = {
+//   CHANGE_SETTING: (state, { key, value }) => {
+//     if (state.hasOwnProperty(key)) {
+//       state[key] = value
+//     }
+//   }
+// }

-const actions = {
-  // 修改布局设置
-  changeSetting({ commit }, data) {
-    commit('CHANGE_SETTING', data)
-  },
-  // 设置网页标题
-  setTitle({ commit }, title) {
-    state.title = title
-    useDynamicTitle();
-  }
-}
+// const actions = {
+//   // 修改布局设置
+//   changeSetting({ commit }, data) {
+//     commit('CHANGE_SETTING', data)
+//   },
+//   // 设置网页标题
+//   setTitle({ commit }, title) {
+//     state.title = title
+//     useDynamicTitle();
+//   }
+// }

-export default {
-  namespaced: true,
-  state,
-  mutations,
-  actions
-}
+// export default {
+//   namespaced: true,
+//   state,
+//   mutations,
+//   actions
+// }
@@ -1,37 +1,23 @@
-const state = {
-  onlineNum: 0,
-  onlineUsers: [],
-  noticeList: []
-}
-const mutations = {
-  SET_ONLINEUSER_NUM: (state, num) => {
-    state.onlineNum = num
-  },
-  SET_NOTICE_list: (state, data) => {
-    state.noticeList = data;
-  },
-  SET_ONLINE_USERS: (state, data) => {
-    state.onlineUsers = data;
+const useSocketStore = defineStore('socket', {
+  state: () => ({
+    onlineNum: 0,
+    onlineUsers: [],
+    noticeList: [],
+    noticeDot: false
+  }),
+  actions: {
+    //更新在线人数
+    setOnlineUserNum(num) {
+      this.onlineNum = num
+    },
+    // 更新系统通知
+    setNoticeList(data) {
+      this.noticeList = data
+      this.noticeDot = data.length > 0
+    },
+    setOnlineUsers(data) {
+      this.onlineUsers = data
+    }
  }
-}
-
-const actions = {
-  //更新在线人数
-  changeOnlineNum({ commit }, data) {
-    commit('SET_ONLINEUSER_NUM', data)
-  },
-  // 更新系统通知
-  getNoticeList({ commit }, data) {
-    commit('SET_NOTICE_list', data)
-  },
-  getOnlineUsers({ commit }, data) {
-    commit('SET_ONLINE_USERS', data)
-  }
-}
-
-export default {
-  namespaced: true,
-  state,
-  mutations,
-  actions
-}
+})
+export default useSocketStore
@@ -1,207 +1,156 @@
-const state = {
-  visitedViews: [],
-  cachedViews: []
-}
-
-const mutations = {
-  ADD_VISITED_VIEW: (state, view) => {
-    if (state.visitedViews.some(v => v.path === view.path)) return
-    state.visitedViews.push(
-      Object.assign({}, view, {
-        title: view.meta.title || 'no-name'
-      })
-    )
-  },
-  ADD_CACHED_VIEW: (state, view) => {
-    if (state.cachedViews.includes(view.name)) return
-    if (!view.meta.noCache) {
-      state.cachedViews.push(view.name)
-    }
-  },
-
-  DEL_VISITED_VIEW: (state, view) => {
-    for (const [i, v] of state.visitedViews.entries()) {
-      if (v.path === view.path) {
-        state.visitedViews.splice(i, 1)
-        break
+const useTagsViewStore = defineStore(
+  'tagsView',
+  {
+    state: () => ({
+      visitedViews: [],
+      cachedViews: []
+    }),
+    actions: {
+      addView(view) {
+        this.addVisitedView(view)
+        this.addCachedView(view)
+      },
+      addVisitedView(view) {
+        if (this.visitedViews.some(v => v.path === view.path)) return
+        this.visitedViews.push(
+          Object.assign({}, view, {
+            title: view.meta.title || 'no-name'
+          })
+        )
+      },
+      addCachedView(view) {
+        if (this.cachedViews.includes(view.name)) return
+        if (!view.meta.noCache) {
+          this.cachedViews.push(view.name)
+        }
+      },
+      delView(view) {
+        return new Promise(resolve => {
+          this.delVisitedView(view)
+          this.delCachedView(view)
+          resolve({
+            visitedViews: [...this.visitedViews],
+            cachedViews: [...this.cachedViews]
+          })
+        })
+      },
+      delVisitedView(view) {
+        return new Promise(resolve => {
+          for (const [i, v] of this.visitedViews.entries()) {
+            if (v.path === view.path) {
+              this.visitedViews.splice(i, 1)
+              break
+            }
+          }
+          resolve([...this.visitedViews])
+        })
+      },
+      delCachedView(view) {
+        return new Promise(resolve => {
+          const index = this.cachedViews.indexOf(view.name)
+          index > -1 && this.cachedViews.splice(index, 1)
+          resolve([...this.cachedViews])
+        })
+      },
+      delOthersViews(view) {
+        return new Promise(resolve => {
+          this.delOthersVisitedViews(view)
+          this.delOthersCachedViews(view)
+          resolve({
+            visitedViews: [...this.visitedViews],
+            cachedViews: [...this.cachedViews]
+          })
+        })
+      },
+      delOthersVisitedViews(view) {
+        return new Promise(resolve => {
+          this.visitedViews = this.visitedViews.filter(v => {
+            return v.meta.affix || v.path === view.path
+          })
+          resolve([...this.visitedViews])
+        })
+      },
+      delOthersCachedViews(view) {
+        return new Promise(resolve => {
+          const index = this.cachedViews.indexOf(view.name)
+          if (index > -1) {
+            this.cachedViews = this.cachedViews.slice(index, index + 1)
+          } else {
+            this.cachedViews = []
+          }
+          resolve([...this.cachedViews])
+        })
+      },
+      delAllViews(view) {
+        return new Promise(resolve => {
+          this.delAllVisitedViews(view)
+          this.delAllCachedViews(view)
+          resolve({
+            visitedViews: [...this.visitedViews],
+            cachedViews: [...this.cachedViews]
+          })
+        })
+      },
+      delAllVisitedViews(view) {
+        return new Promise(resolve => {
+          const affixTags = this.visitedViews.filter(tag => tag.meta.affix)
+          this.visitedViews = affixTags
+          resolve([...this.visitedViews])
+        })
+      },
+      delAllCachedViews(view) {
+        return new Promise(resolve => {
+          this.cachedViews = []
+          resolve([...this.cachedViews])
+        })
+      },
+      updateVisitedView(view) {
+        for (let v of this.visitedViews) {
+          if (v.path === view.path) {
+            v = Object.assign(v, view)
+            break
+          }
+        }
+      },
+      delRightTags(view) {
+        return new Promise(resolve => {
+          const index = this.visitedViews.findIndex(v => v.path === view.path)
+          if (index === -1) {
+            return
+          }
+          this.visitedViews = this.visitedViews.filter((item, idx) => {
+            if (idx <= index || (item.meta && item.meta.affix)) {
+              return true
+            }
+            const i = this.cachedViews.indexOf(item.name)
+            if (i > -1) {
+              this.cachedViews.splice(i, 1)
+            }
+            return false
+          })
+          resolve([...this.visitedViews])
+        })
+      },
+      delLeftTags(view) {
+        return new Promise(resolve => {
+          const index = this.visitedViews.findIndex(v => v.path === view.path)
+          if (index === -1) {
+            return
+          }
+          this.visitedViews = this.visitedViews.filter((item, idx) => {
+            if (idx >= index || (item.meta && item.meta.affix)) {
+              return true
+            }
+            const i = this.cachedViews.indexOf(item.name)
+            if (i > -1) {
+              this.cachedViews.splice(i, 1)
+            }
+            return false
+          })
+          resolve([...this.visitedViews])
+        })
      }
    }
-  },
-  DEL_CACHED_VIEW: (state, view) => {
-    const index = state.cachedViews.indexOf(view.name)
-    index > -1 && state.cachedViews.splice(index, 1)
-  },
+  })

-  DEL_OTHERS_VISITED_VIEWS: (state, view) => {
-    state.visitedViews = state.visitedViews.filter(v => {
-      return v.meta.affix || v.path === view.path
-    })
-  },
-  DEL_OTHERS_CACHED_VIEWS: (state, view) => {
-    const index = state.cachedViews.indexOf(view.name)
-    if (index > -1) {
-      state.cachedViews = state.cachedViews.slice(index, index + 1)
-    } else {
-      state.cachedViews = []
-    }
-  },
-
-  DEL_ALL_VISITED_VIEWS: state => {
-    // keep affix tags
-    const affixTags = state.visitedViews.filter(tag => tag.meta.affix)
-    state.visitedViews = affixTags
-  },
-  DEL_ALL_CACHED_VIEWS: state => {
-    state.cachedViews = []
-  },
-
-  UPDATE_VISITED_VIEW: (state, view) => {
-    for (let v of state.visitedViews) {
-      if (v.path === view.path) {
-        v = Object.assign(v, view)
-        break
-      }
-    }
-  },
-  
-  DEL_RIGHT_VIEWS: (state, view) => {
-    const index = state.visitedViews.findIndex(v => v.path === view.path)
-    if (index === -1) {
-      return
-    }
-    state.visitedViews = state.visitedViews.filter((item, idx) => {
-      if (idx <= index || (item.meta && item.meta.affix)) {
-        return true
-      }
-      const i = state.cachedViews.indexOf(item.name)
-      if (i > -1) {
-        state.cachedViews.splice(i, 1)
-      }
-      return false
-    })
-  },
-
-  DEL_LEFT_VIEWS: (state, view) => {
-    const index = state.visitedViews.findIndex(v => v.path === view.path)
-    if (index === -1) {
-      return
-    }
-    state.visitedViews = state.visitedViews.filter((item, idx) => {
-      if (idx >= index || (item.meta && item.meta.affix)) {
-        return true
-      }
-      const i = state.cachedViews.indexOf(item.name)
-      if (i > -1) {
-        state.cachedViews.splice(i, 1)
-      }
-      return false
-    })
-  }
-}
-
-const actions = {
-  addView({ dispatch }, view) {
-    dispatch('addVisitedView', view)
-    dispatch('addCachedView', view)
-  },
-  addVisitedView({ commit }, view) {
-    commit('ADD_VISITED_VIEW', view)
-  },
-  addCachedView({ commit }, view) {
-    commit('ADD_CACHED_VIEW', view)
-  },
-
-  delView({ dispatch, state }, view) {
-    return new Promise(resolve => {
-      dispatch('delVisitedView', view)
-      dispatch('delCachedView', view)
-      resolve({
-        visitedViews: [...state.visitedViews],
-        cachedViews: [...state.cachedViews]
-      })
-    })
-  },
-  delVisitedView({ commit, state }, view) {
-    return new Promise(resolve => {
-      commit('DEL_VISITED_VIEW', view)
-      resolve([...state.visitedViews])
-    })
-  },
-  delCachedView({ commit, state }, view) {
-    return new Promise(resolve => {
-      commit('DEL_CACHED_VIEW', view)
-      resolve([...state.cachedViews])
-    })
-  },
-
-  delOthersViews({ dispatch, state }, view) {
-    return new Promise(resolve => {
-      dispatch('delOthersVisitedViews', view)
-      dispatch('delOthersCachedViews', view)
-      resolve({
-        visitedViews: [...state.visitedViews],
-        cachedViews: [...state.cachedViews]
-      })
-    })
-  },
-  delOthersVisitedViews({ commit, state }, view) {
-    return new Promise(resolve => {
-      commit('DEL_OTHERS_VISITED_VIEWS', view)
-      resolve([...state.visitedViews])
-    })
-  },
-  delOthersCachedViews({ commit, state }, view) {
-    return new Promise(resolve => {
-      commit('DEL_OTHERS_CACHED_VIEWS', view)
-      resolve([...state.cachedViews])
-    })
-  },
-
-  delAllViews({ dispatch, state }, view) {
-    return new Promise(resolve => {
-      dispatch('delAllVisitedViews', view)
-      dispatch('delAllCachedViews', view)
-      resolve({
-        visitedViews: [...state.visitedViews],
-        cachedViews: [...state.cachedViews]
-      })
-    })
-  },
-  delAllVisitedViews({ commit, state }) {
-    return new Promise(resolve => {
-      commit('DEL_ALL_VISITED_VIEWS')
-      resolve([...state.visitedViews])
-    })
-  },
-  delAllCachedViews({ commit, state }) {
-    return new Promise(resolve => {
-      commit('DEL_ALL_CACHED_VIEWS')
-      resolve([...state.cachedViews])
-    })
-  },
-
-  updateVisitedView({ commit }, view) {
-    commit('UPDATE_VISITED_VIEW', view)
-  },
-
-  delRightTags({ commit }, view) {
-    return new Promise(resolve => {
-      commit('DEL_RIGHT_VIEWS', view)
-      resolve([...state.visitedViews])
-    })
-  },
-
-  delLeftTags({ commit }, view) {
-    return new Promise(resolve => {
-      commit('DEL_LEFT_VIEWS', view)
-      resolve([...state.visitedViews])
-    })
-  },
-}
-
-export default {
-  namespaced: true,
-  state,
-  mutations,
-  actions
-}
+export default useTagsViewStore
@@ -2,40 +2,19 @@ import { login, logout, getInfo } from '@/api/system/login'
 import { getToken, setToken, removeToken } from '@/utils/auth'
 import defAva from '@/assets/images/profile.jpg'

-const user = {
-  state: {
+const useUserStore = defineStore('user', {
+  state: () => ({
    userInfo: '',
    token: getToken(),
    name: '',
    avatar: '',
    roles: [],
-    permissions: []
-  },
-
-  mutations: {
-    SET_TOKEN: (state, token) => {
-      state.token = token
-    },
-    SET_NAME: (state, name) => {
-      state.name = name
-    },
-    SET_AVATAR: (state, avatar) => {
-      state.avatar = avatar
-    },
-    SET_ROLES: (state, roles) => {
-      state.roles = roles
-    },
-    SET_PERMISSIONS: (state, permissions) => {
-      state.permissions = permissions
-    },
-    SET_USERINFO: (state, value) => {
-      state.userInfo = value
-    }
-  },
-
+    permissions: [],
+    userId: 0
+  }),
  actions: {
    // 登录
-    Login({ commit }, userInfo) {
+    login(userInfo) {
      const username = userInfo.username.trim()
      const password = userInfo.password
      const code = userInfo.code
@@ -44,8 +23,7 @@ const user = {
        login(username, password, code, uuid).then(res => {
          if (res.code == 200) {
            setToken(res.data)
-            //提交上面的mutaions方法
-            commit('SET_TOKEN', res.data)
+            this.token = res.data
            resolve() //then处理
          } else {
            console.log('login error ', res)
@@ -55,25 +33,24 @@ const user = {
          reject(error)
        })
      })
-    },
-
-    // 获取用户信息
-    GetInfo({ commit, state }) {
+    }, // 获取用户信息
+    getInfo() {
      return new Promise((resolve, reject) => {
        getInfo().then(res => {
          const data = res.data
          const avatar = data.user.avatar == "" ? defAva : data.user.avatar;

          if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
-            commit('SET_ROLES', data.roles)
-            commit('SET_PERMISSIONS', data.permissions)
+            this.roles = data.roles
+            this.permissions = data.permissions
          } else {
-            commit('SET_ROLES', ['ROLE_DEFAULT'])
+            this.roles = ['ROLE_DEFAULT']
          }

-          commit('SET_NAME', data.user.nickName)
-          commit('SET_AVATAR', avatar)
-          commit('SET_USERINFO', data.user) //新加
+          this.name = data.user.nickName
+          this.avatar = avatar
+					this.userInfo = data.user //新加
+					this.userId = data.user.userId//新加
          resolve(res)
        }).catch(error => {
          console.error(error);
@@ -81,14 +58,13 @@ const user = {
        })
      })
    },
-
    // 退出系统
-    LogOut({ commit, state }) {
+    logOut() {
      return new Promise((resolve, reject) => {
-        logout(state.token).then((res) => {
-          commit('SET_TOKEN', '')
-          commit('SET_ROLES', [])
-          commit('SET_PERMISSIONS', [])
+        logout(this.token).then((res) => {
+          this.token = ''
+          this.roles = []
+          this.permissions = []
          removeToken()
          resolve(res)
        }).catch(error => {
@@ -96,16 +72,14 @@ const user = {
        })
      })
    },
-
    // 前端 登出
-    FedLogOut({ commit }) {
+    fedLogOut() {
      return new Promise(resolve => {
-        commit('SET_TOKEN', '')
+        this.token = ''
        removeToken()
        resolve()
      })
    }
  }
-}
-
-export default user
+})
+export default useUserStore