perf 未读消息数量使用pinia控制

src/layouts/default/header/components/notify/NoticeReader.vue

@@ -24,6 +24,9 @@
   import { $ref } from 'vue/macros'
   import { SiteMessage } from '/@/views/modules/notice/site/SiteMessage.api'
   import { findById, read } from './SiteMessage.api'
+  import { useSiteMessageStore } from '/@/layouts/default/header/components/notify/SiteMessage.store'
+
+  const siteMessageStore = useSiteMessageStore()
 
   const modalWidth = $ref('60%')
   let visible = $ref(false)
@@ -37,7 +40,7 @@
     message = messageInfo
     findById(messageInfo.id).then(({ data }) => {
       message = data
-      read(messageInfo.id)
+      read(messageInfo.id).then(() => siteMessageStore.updateNotReadCount())
       confirmLoading = false
     })
   }

src/layouts/default/header/components/notify/SiteMessage.store.ts

@@ -0,0 +1,22 @@
+import { defineStore } from 'pinia'
+import { store } from '/@/store'
+import { countByReceiveNotRead } from './SiteMessage.api'
+
+export const useSiteMessageStore = defineStore({
+  id: 'SiteMessageStore',
+  state: () => ({
+    notReadCount: 0,
+  }),
+  actions: {
+    // 更新未读消息数量
+    updateNotReadCount() {
+      countByReceiveNotRead().then(({ data }) => {
+        this.notReadCount = data
+      })
+    },
+  },
+})
+// setup 之外之使用
+export function useSiteMessageStoreWithOut() {
+  return useSiteMessageStore(store)
+}

src/layouts/default/header/components/notify/index.vue

@@ -26,7 +26,7 @@
             </a-list-item>
           </a-list>
           <div style="margin-top: 5px; text-align: center">
-            <a-button @click="toSiteMessage" type="dashed" block>查看更多</a-button>
+            <a-button @click="toSiteMessage" type="dashed" block>查看{{ num }}更多</a-button>
           </div>
         </a-spin>
       </template>
@@ -35,15 +35,18 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted } from 'vue'
+  import { computed, onMounted } from 'vue'
   import { BellOutlined } from '@ant-design/icons-vue'
   import { useDesign } from '/@/hooks/web/useDesign'
   import { useMessage } from '/@/hooks/web/useMessage'
   import { $ref } from 'vue/macros'
-  import { countByReceiveNotRead, pageByReceive } from '/@/layouts/default/header/components/notify/SiteMessage.api'
+  import { pageByReceive } from '/@/layouts/default/header/components/notify/SiteMessage.api'
   import { router } from '/@/router'
   import { PageEnum } from '/@/enums/pageEnum'
   import NoticeReader from '/@/layouts/default/header/components/notify/NoticeReader.vue'
+  import { useSiteMessageStore } from './SiteMessage.store'
+
+  const siteMessageStore = useSiteMessageStore()
 
   const { prefixCls } = useDesign('header-notify')
   const { createMessage } = useMessage()
@@ -53,19 +56,12 @@
   let loading = $ref(false)
   let visible = $ref(false)
   // 未读消息数量
-  let notReadMsgCount = $ref(0)
+  let notReadMsgCount = computed(() => siteMessageStore.notReadCount)
   let notReadMsgList = $ref<any>([])
   onMounted(() => {
-    receivedCount()
+    siteMessageStore.updateNotReadCount()
   })
 
-  // 查询当前用户的未读消息数量
-  function receivedCount() {
-    countByReceiveNotRead().then(({ data }) => {
-      notReadMsgCount = data
-    })
-  }
-
   // 打开列表页
   function fetchNotice() {
     loading = false
@@ -95,9 +91,6 @@
   // 查看我的消息
   function showMessage(message) {
     visible = false
-    if (!message.haveRead) {
-
-    }
     noticeIconReader.init(message)
   }
 </script>

src/store/modules/multipleTab.ts

@@ -13,7 +13,6 @@ import { getRawRoute } from '/@/utils'
 import { MULTIPLE_TABS_KEY } from '/@/enums/cacheEnum'
 
 import projectSetting from '/@/settings/projectSetting'
-import { useUserStore } from '/@/store/modules/user'
 
 export interface MultipleTabState {
   cacheTabList: Set<string>