放弃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, () => {