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

src/components/HeaderSearch/index.vue

@@ -21,6 +21,7 @@
 import Fuse from 'fuse.js'
 import { getNormalPath } from '@/utils/ruoyi'
 import { isHttp } from '@/utils/validate'
+import usePermissionStore from '@/store/modules/permission'
 
 const search = ref('');
 const options = ref([]);
@@ -28,9 +29,8 @@ const searchPool = ref([]);
 const show = ref(false);
 const fuse = ref(undefined);
 const headerSearchSelectRef = ref(null);
-const store = useStore();
 const router = useRouter();
-const routes = computed(() => store.getters.permission_routes);
+const routes = computed(() => usePermissionStore().routes);
 
 function click() {
   show.value = !show.value

src/components/LangSelect/index.vue

@@ -14,8 +14,9 @@
 </template>
 
 <script setup>
-const store = useStore()
-const lang = computed(() => store.getters.language)
+import useAppStore from '@/store/modules/app'
+const appStore = useAppStore()
+const lang = computed(() => useAppStore().lang)
 
 const { proxy } = getCurrentInstance()
 const langOptions = ref([
@@ -26,7 +27,7 @@ const langOptions = ref([
 
 function handleLanguageChange(lang) {
   proxy.$modal.loading('正在设置语言，请稍候...')
-  store.dispatch('app/setLang', lang)
+  appStore.setLang(lang)
   setTimeout('window.location.reload()', 1000)
 }
 </script>

src/components/Notice/Index.vue

@@ -33,15 +33,18 @@
 </template>
 
 <script setup name="noticeIndex">
+import useSocketStore from '@/store/modules/socket'
+
 const { proxy } = getCurrentInstance()
+
 // 小红点
 const newsDot = ref(false)
 
 const noticeList = computed(() => {
-  return proxy.$store.getters.noticeList
+  return useSocketStore().noticeList
 })
 const noticeDot = computed(() => {
-  return proxy.$store.getters.noticeDot
+  return useSocketStore().noticeDot
 })
 // 全部已读点击
 function onAllReadClick() {

src/components/SizeSelect/index.vue

@@ -14,8 +14,9 @@
 </template>
 
 <script setup>
-const store = useStore()
-const size = computed(() => store.getters.size)
+import useAppStore from '@/store/modules/app'
+const appStore = useAppStore()
+const size = computed(() => appStore.size)
 const route = useRoute()
 const router = useRouter()
 const { proxy } = getCurrentInstance()
@@ -25,21 +26,21 @@ const sizeOptions = ref([
   { label: proxy.$t('layout.small'), value: 'small' },
 ])
 
-function refreshView() {
-  // In order to make the cached page re-rendered
-  store.dispatch('tagsView/delAllCachedViews', route)
+// function refreshView() {
+//   // In order to make the cached page re-rendered
+//   store.dispatch('tagsView/delAllCachedViews', route)
 
-  const { fullPath } = route
+//   const { fullPath } = route
 
-  nextTick(() => {
-    router.replace({
-      path: '/redirect' + fullPath,
-    })
-  })
-}
+//   nextTick(() => {
+//     router.replace({
+//       path: '/redirect' + fullPath,
+//     })
+//   })
+// }
 function handleSetSize(size) {
   proxy.$modal.loading('正在设置布局大小，请稍候...')
-  store.dispatch('app/setSize', size)
+  appStore.setSize(size)
   setTimeout('window.location.reload()', 1000)
 }
 </script>

src/components/TopNav/index.vue

@@ -37,6 +37,9 @@ import { constantRoutes } from '@/router'
 import { isHttp } from '@/utils/validate'
 import { useRouter } from 'vue-router'
 import { getNormalPath } from '@/utils/ruoyi'
+import useAppStore from '@/store/modules/app'
+import useSettingsStore from '@/store/modules/settings'
+import usePermissionStore from '@/store/modules/permission'
 
 // 顶部栏初始数
 const visibleNumber = ref(5)
@@ -45,14 +48,16 @@ const isFrist = ref(false)
 // 当前激活菜单的 index
 const currentIndex = ref(undefined)
 
-const store = useStore()
+const appStore = useAppStore()
+const settingsStore = useSettingsStore()
+const permissionStore = usePermissionStore()
 const route = useRoute()
 const router = useRouter()
 
 // 主题颜色
-const theme = computed(() => store.state.settings.theme)
+const theme = computed(() => settingsStore.theme)
 // 所有的路由信息
-const routers = computed(() => store.state.permission.topbarRouters)
+const routers = computed(() => permissionStore.topbarRouters)
 
 // 顶部显示菜单
 const topMenus = computed(() => {
@@ -153,7 +158,7 @@ function activeRoutes(key) {
     })
   }
   if (routes.length > 0) {
-    store.commit('SET_SIDEBAR_ROUTERS', routes)
+    permissionStore.setSidebarRouters(routes)
   }
   return routes
 }