放弃vuex改用pinia (#872)

Co-authored-by: bypanghu <bypanghu@163.com>

web/src/view/layout/aside/asideComponent/asyncSubmenu.vue

@@ -11,7 +11,6 @@
 </template>
 
 <script>
-import { defineProps } from 'vue'
 export default {
   name: 'AsyncSubmenu',
 }

web/src/view/layout/aside/asideComponent/index.vue

@@ -15,7 +15,7 @@ export default {
 <script setup>
 import MenuItem from './menuItem.vue'
 import AsyncSubmenu from './asyncSubmenu.vue'
-import { computed, defineProps } from 'vue'
+import { computed } from 'vue'
 const props = defineProps({
   routerInfo: {
     type: Object,

web/src/view/layout/aside/asideComponent/menuItem.vue

@@ -16,7 +16,6 @@ export default {
 </script>
 
 <script setup>
-import { defineProps } from 'vue'
 defineProps({
   routerInfo: {
     default: function() {

web/src/view/layout/aside/historyComponent/history.vue

@@ -19,13 +19,13 @@
         <template #label>
           <span
             :style="{
-              color: activeValue === name(item) ? activeColor : '#333',
+              color: activeValue === name(item) ? userStore.activeColor : '#333',
             }"
           ><i
              class="dot"
              :style="{
                backgroundColor:
-                 activeValue === name(item) ? activeColor : '#ddd',
+                 activeValue === name(item) ? userStore.activeColor : '#ddd',
              }"
            />
             {{ item.meta.title }}</span>
@@ -54,12 +54,11 @@ export default {
 </script>
 
 <script setup>
-import { useStore } from 'vuex'
 import { emitter } from '@/utils/bus.js'
 import { computed, onUnmounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { useUserStore } from '@/pinia/modules/user'
 
-const store = useStore()
 const route = useRoute()
 const router = useRouter()
 
@@ -71,8 +70,7 @@ const historys = ref([])
 const activeValue = ref('')
 const contextMenuVisible = ref(false)
 
-const userInfo = computed(() => store.getters['user/userInfo'])
-const activeColor = computed(() => store.getters['user/activeColor'])
+const userStore = useUserStore()
 
 const name = (item) => {
   return (
@@ -85,7 +83,7 @@ const top = ref(0)
 const isCollapse = ref(false)
 const isMobile = ref(false)
 const rightActive = ref('')
-const defaultRouter = computed(() => userInfo.value.authority.defaultRouter)
+const defaultRouter = computed(() => userStore.userInfo.authority.defaultRouter)
 const openContextMenu = (e) => {
   if (
     historys.value.length === 1 &&

web/src/view/layout/aside/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="{ background: sideMode }">
+  <div :style="{ background: userStore.sideMode }">
     <el-scrollbar style="height: calc(100vh - 60px)">
       <transition
         :duration="{ enter: 800, leave: 100 }"
@@ -10,14 +10,14 @@
           :collapse="isCollapse"
           :collapse-transition="false"
           :default-active="active"
-          :background-color="sideMode"
-          :active-text-color="activeColor"
-          :text-color="baseColor"
+          :background-color="userStore.sideMode"
+          :active-text-color="userStore.activeColor"
+          :text-color="userStore.baseColor"
           class="el-menu-vertical"
           unique-opened
           @select="selectMenuItem"
         >
-          <template v-for="item in asyncRouters[0].children">
+          <template v-for="item in routerStore.asyncRouters[0].children">
             <aside-component
               v-if="!item.hidden"
               :key="item.name"
@@ -37,20 +37,18 @@ export default {
 </script>
 
 <script setup>
-import { useStore } from 'vuex'
 import AsideComponent from '@/view/layout/aside/asideComponent/index.vue'
 import { emitter } from '@/utils/bus.js'
-import { ref, computed, watch, onUnmounted } from 'vue'
+import { ref, watch, onUnmounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { useUserStore } from '@/pinia/modules/user'
+import { useRouterStore } from '@/pinia/modules/router'
 
 const route = useRoute()
 const router = useRouter()
-const store = useStore()
 
-const asyncRouters = computed(() => store.getters['router/asyncRouters'])
-const baseColor = computed(() => store.getters['user/baseColor'])
-const activeColor = computed(() => store.getters['user/activeColor'])
-const sideMode = computed(() => store.getters['user/sideMode'])
+const userStore = useUserStore()
+const routerStore = useRouterStore()
 
 const active = ref('')
 watch(route, () => {

web/src/view/layout/index.vue

@@ -44,7 +44,7 @@
                           <div class="dp-flex justify-content-center align-items height-full width-full">
                             <span class="header-avatar" style="cursor: pointer">
                               <CustomPic />
-                              <span style="margin-left: 5px">{{ userInfo.nickName }}</span>
+                              <span style="margin-left: 5px">{{ userStore.userInfo.nickName }}</span>
                               <el-icon>
                                 <arrow-down />
                               </el-icon>
@@ -54,18 +54,18 @@
                             <el-dropdown-menu class="dropdown-group">
                               <el-dropdown-item>
                                 <span style="font-weight: 600;">
-                                  当前角色：{{ userInfo.authority.authorityName }}
+                                  当前角色：{{ userStore.userInfo.authority.authorityName }}
                                 </span>
                               </el-dropdown-item>
-                              <template v-if="userInfo.authorities">
-                                <el-dropdown-item v-for="item in userInfo.authorities.filter(i=>i.authorityId!==userInfo.authorityId)" :key="item.authorityId" @click="changeUserAuth(item.authorityId)">
+                              <template v-if="userStore.userInfo.authorities">
+                                <el-dropdown-item v-for="item in userStore.userInfo.authorities.filter(i=>i.authorityId!==userStore.userInfo.authorityId)" :key="item.authorityId" @click="changeUserAuth(item.authorityId)">
                                   <span>
                                     切换为：{{ item.authorityName }}
                                   </span>
                                 </el-dropdown-item>
                               </template>
                               <el-dropdown-item icon="avatar" @click="toPerson">个人信息</el-dropdown-item>
-                              <el-dropdown-item icon="reading-lamp" @click="LoginOut">登 出</el-dropdown-item>
+                              <el-dropdown-item icon="reading-lamp" @click="userStore.LoginOut">登 出</el-dropdown-item>
                             </el-dropdown-menu>
                           </template>
                         </el-dropdown>
@@ -83,7 +83,7 @@
         </transition>
         <router-view v-if="reloadFlag" v-slot="{ Component }" v-loading="loadingFlag" element-loading-text="正在加载中" class="admin-box">
           <transition mode="out-in" name="el-fade-in-linear">
-            <keep-alive :include="$store.getters['router/keepAliveRouters']">
+            <keep-alive :include="useRouterStore.keepAliveRouters">
               <component :is="Component" />
             </keep-alive>
           </transition>
@@ -109,13 +109,13 @@ import Search from '@/view/layout/search/search.vue'
 import BottomInfo from '@/view/layout/bottomInfo/bottomInfo.vue'
 import CustomPic from '@/components/customPic/index.vue'
 import Setting from './setting/index.vue'
-import { useStore } from 'vuex'
 import { setUserAuthority } from '@/api/user'
 import { emitter } from '@/utils/bus.js'
 import { computed, ref, onMounted, nextTick } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
+import { useUserStore } from '@/pinia/modules/user'
+import { useRouterStore } from '@/pinia/modules/router'
 
-const store = useStore()
 const router = useRouter()
 const route = useRoute()
 
@@ -163,35 +163,30 @@ onMounted(() => {
   }
 })
 
-const userInfo = computed(() => store.getters['user/userInfo'])
-const sideMode = computed(() => store.getters['user/sideMode'])
-const baseColor = computed(() => store.getters['user/baseColor'])
+const userStore = useUserStore()
+
 const textColor = computed(() => {
-  if (sideMode === 'dark') {
+  if (userStore.sideMode === 'dark') {
     return '#fff'
-  } else if (sideMode === 'light') {
+  } else if (userStore.sideMode === 'light') {
     return '#191a23'
   } else {
-    return baseColor.value
+    return userStore.baseColor
   }
 })
 
 const backgroundColor = computed(() => {
-  if (sideMode === 'dark') {
+  if (userStore.sideMode === 'dark') {
     return '#191a23'
-  } else if (sideMode === 'light') {
+  } else if (userStore.sideMode === 'light') {
     return '#fff'
   } else {
-    return sideMode.value
+    return userStore.sideMode
   }
 })
 
 const matched = computed(() => route.matched)
 
-const LoginOut = () => {
-  store.dispatch('user/LoginOut')
-}
-
 const changeUserAuth = async(id) => {
   const res = await setUserAuthority({
     authorityId: id

web/src/view/layout/screenfull/index.vue

@@ -70,7 +70,7 @@ export default {
 
 <script setup>
 import screenfull from 'screenfull' // 引入screenfull
-import { defineProps, onMounted, onUnmounted, ref } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 defineProps({
   width: {
     type: Number,

web/src/view/layout/search/search.vue

@@ -11,7 +11,7 @@
           @change="changeRouter"
         >
           <el-option
-            v-for="item in routerList"
+            v-for="item in routerStore.routerList"
             :key="item.value"
             :label="item.label"
             :value="item.value"
@@ -58,15 +58,14 @@ export default {
 
 <script setup>
 import Screenfull from '@/view/layout/screenfull/index.vue'
-import { useStore } from 'vuex'
 import { emitter } from '@/utils/bus.js'
-import { ref, computed, nextTick } from 'vue'
+import { ref, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
+import { useRouterStore } from '@/pinia/modules/router'
 
-const store = useStore()
 const router = useRouter()
 
-const routerList = computed(() => store.getters['router/routerList'])
+const routerStore = useRouterStore()
 
 const value = ref('')
 const changeRouter = () => {

web/src/view/layout/setting/index.vue

@@ -13,7 +13,7 @@
             <div class="theme-box">
               <div class="item" @click="changeMode('light')">
                 <div class="item-top">
-                  <el-icon v-if="mode === 'light'" class="check">
+                  <el-icon v-if="userStore.mode === 'light'" class="check">
                     <check />
                   </el-icon>
                   <img src="https://gw.alipayobjects.com/zos/antfincdn/NQ%24zoisaD2/jpRkZQMyYRryryPNtyIC.svg">
@@ -24,7 +24,7 @@
               </div>
               <div class="item" @click="changeMode('dark')">
                 <div class="item-top">
-                  <el-icon v-if="mode === 'dark'" class="check">
+                  <el-icon v-if="userStore.mode === 'dark'" class="check">
                     <check />
                   </el-icon>
                   <img src="https://gw.alipayobjects.com/zos/antfincdn/XwFOFbLkSM/LCkqqYNmvBEbokSDscrm.svg">
@@ -49,12 +49,12 @@ export default {
 </script>
 
 <script setup>
-import { useStore } from 'vuex'
-import { computed, ref } from 'vue'
-const store = useStore()
+import { ref } from 'vue'
+import { useUserStore } from '@/pinia/modules/user'
 const drawer = ref(false)
 const direction = ref('rtl')
-const mode = computed(() => store.getters['user/mode'])
+
+const userStore = useUserStore()
 
 const handleClose = () => {
   drawer.value = false
@@ -64,10 +64,10 @@ const showSettingDrawer = () => {
 }
 const changeMode = (e) => {
   if (e === null) {
-    store.dispatch('user/changeSideMode', 'dark')
+    userStore.changeSideMode('dark')
     return
   }
-  store.dispatch('user/changeSideMode', e)
+  userStore.changeSideMode(e)
 }
 
 </script>