若需要在未展示 IM UIKit 页面时，获取所有会话未读数，您可以参考本文档介绍的方式实现。

React

1. 在 Provider 中传入正确的参数，并完成初始化，具体请参考初始化（React）。

   import {  Provider } from "@xkit-yx/im-kit-ui";
   <Provider
           sdkVersion={sdkVersion}
           localeConfig={languageMap[curLanguage]}
           initOptions={initOptions}
           localOptions={localOptions}
         >
           //...
   </Provider>
   

2. 封装需要通知的组件，使用 observer 包裹该组件，在该组件中访问 store，遍历所有会话，获取未读数。

   // Notification.tsx
   import React from 'react'
   import { useStateContext } from "@xkit-yx/im-kit-ui";
   import { observer } from 'mobx-react'
   const Notification = observer(() => {
     const { store } = useStateContext();
     const unreadMsgsCount = store.uiStore.sessionUnread || 0
     return (
       <div >
       // Todo  以下UI需要您自行实现
         消息未读数：{
           unreadMsgsCount        
         }
       </div>
     )
   })
   
   export default Notification
   

3. 使用 Provider 包裹 Notification 组件（注意全局只允许有一个Provider）。当会话有未读消息更新时，store 内部会自动获取最新的会话，您可以在 Notification 组件中通过 store.uiStore.sessionUnread获取到所有会话的未读数。

   由于已使用 observer 包裹 Notification 组件，所以视图会自动更新。

   import {  Provider } from "@xkit-yx/im-kit-ui";
   <Provider
           sdkVersion={sdkVersion}
           localeConfig={languageMap[curLanguage]}
           initOptions={initOptions}
           localOptions={localOptions}
         >
           <Notification></Notification>
   </Provider>
   

Vue

1. 在 app.vue 中完成 IM UIKit 初始化，具体请参考初始化（Vue）。

   <script lang="ts">
   import { IMUIKit } from "@xkit-yx/im-kit-ui";
   import { app } from "./main";
   import  Notification  from "./components/Notification/index.vue";
   export default {
     name: "App",
     components: {
       IMApp,
       Notification
     },
     data() {
       return {
         uikitInit: false,
       };
     },
     mounted() {
       const initOptions = {...};
       const localOptions = {...}
       app.config.globalProperties.$uikit = new IMUIKit({
         initOptions,
         singleton: true,
         sdkVersion: 1,
         localOptions
       });
       if (app.config.globalProperties.$uikit) {
         this.uikitInit = true;
       }
     },
   };
   </script>
   

2. 封装需要通知的组件，在该组件中访问 store。当收到消息时，autorun 会自动执行。

   在 autorun 中可以实时获取未读数，并给 data 中的数据源赋值，驱动页面更新。

   // Notification.vue
   <template>
       <div>
           <!-- 访问store需保证有IMUIkit 组件渲染，隐藏即可 -->
           <div :style="{ visibility: 'hidden' }" ref="msg" />
           消息未读数:{{ unReadCount }}
       </div>
   </template>
   <script>
   import { AddContainer } from "@xkit-yx/im-kit-ui";
   import { autorun } from 'mobx';
   
   export default {
       name: "Notification",
       data: function () {
           return {
               unReadCount: 0
           };
       },
       methods: {
   
       },
       mounted() {
           this.$uikit.render(
               AddContainer,
               {
                   onClickChat: () => {
                       this.model = "chat";
                   },
               },
               this.$refs.msg
           );
           autorun(() => {
               const store = window.__xkit_store__.store
               this.unReadCount = store.uiStore.sessionUnread || 0
           })
       },
   };
   </script>
   

3. 在 app.vue 中，引入 Notification 组件，在 IM UIKit 完成初始化后，渲染该组件。

   <template>
     <Notification v-if="uikitInit"/>
   </template>
   <script lang="ts">
   import { IMUIKit } from "@xkit-yx/im-kit-ui";
   import { app } from "./main";
   import  Notification  from "./components/Notification/index.vue";
   export default {
     name: "App",
     components: {
       IMApp,
       Notification
     },
     data() {
       return {
         uikitInit: false,
       };
     },
     mounted() {
       const initOptions = {...};
       const localOptions = {...}
       app.config.globalProperties.$uikit = new IMUIKit({
         initOptions,
         singleton: true,
         sdkVersion: 1,
         localOptions
       });
       if (app.config.globalProperties.$uikit) {
         this.uikitInit = true;
       }
     },
   };
   </script>