问题描述

如果您使用了 Vue 框架集成 IM UIKit，在切换账号时可能会切换失败。

问题原因

目前 Vue 框架的 IM UIKit 为单例模式，无法在登出时自动释放内存，可能会导致再次登录时仍为老账号。

解决方案

在调用 logout 登出时手动释放内存，示例代码如下：

<template>
  <button @click="login1">用户1</button>
  <button @click="login2">用户2</button>
  <button @click="logout">退出</button>
  <IMApp v-if="uikitInit" />
</template>
<script lang="ts">
import IMApp from "./components/IMApp/index.vue";
import { IMUIKit } from "@xkit-yx/im-kit-ui";
import RootStore from '@xkit-yx/im-store'
import { NimKitCoreFactory, NimKitCoreTypes } from '@xkit-yx/core-kit'
import { app } from "./main";
export default {
  name: "App",
  components: {
    IMApp,
  },
  data() {
    return {
      uikitInit: false,
    };
  },
  methods: {
    logout() {
      // 重新渲染 uikit 页面
      this.uikitInit = false;
      // 手动释放 uikit 实例内存
      window.__xkit_store__.store.destroy();
      window.__xkit_store__.nim.destroy();
      // 这里根据 sdkVersion 传入 1 或 2
      const NIM = NimKitCoreFactory(2)
      RootStore.ins = undefined
      NIM.ins = undefined
    },
    login1() {
      const initOptions = {
        appkey: "", // 请填写你的appkey
        account: "", // 请填写你的account
        token: "", // 请填写你的token
      };
      const localOptions = {
        // 添加好友模式，默认需要验证
        addFriendNeedVerify: true,
        // 群组被邀请模式，默认不需要验证
        teamBeInviteMode: 'noVerify' as "noVerify" | "needVerify",
        // 单聊消息是否显示已读未读 默认 false
        p2pMsgReceiptVisible: true,
        // 群聊消息是否显示已读未读 默认 false
        teamMsgReceiptVisible: true,
        // 是否需要@消息 默认 true
        needMention: true,
        // 是否显示在线离线状态 默认 true
        loginStateVisible: true,
        // 是否允许转让群主
        allowTransferTeamOwner: true,
      }
      app.config.globalProperties.$uikit = new IMUIKit({
        initOptions,
        singleton: true,
        sdkVersion: 2,
        localOptions
      });
      if (app.config.globalProperties.$uikit) {
        this.uikitInit = true;
      }
    },
    login2() {
      const initOptions = {
        "appkey": "",
        "account": "",
        "token": "",
      };
      const localOptions = {
        // 添加好友模式，默认需要验证
        addFriendNeedVerify: true,
        // 群组被邀请模式，默认不需要验证
        teamBeInviteMode: 'noVerify' as "noVerify" | "needVerify",
        // 单聊消息是否显示已读未读 默认 false
        p2pMsgReceiptVisible: true,
        // 群聊消息是否显示已读未读 默认 false
        teamMsgReceiptVisible: true,
        // 是否需要@消息 默认 true
        needMention: true,
        // 是否显示在线离线状态 默认 true
        loginStateVisible: true,
        // 是否允许转让群主
        allowTransferTeamOwner: true,
      }
      app.config.globalProperties.$uikit = new IMUIKit({
        initOptions,
        singleton: true,
        sdkVersion: 2,
        localOptions
      });
      if (app.config.globalProperties.$uikit) {
        this.uikitInit = true;
      }
    }
  },
  mounted() {

  },
};
</script>