vue双sdk切换问题

Question

目前vue2，使用声网 腾讯直播的sdk，效果是做到A房间使用声网，B房间使用腾讯，控制切换的是socket推送过来的字段存储在vuex里，其他地方通过获取vuex 里state的rtcType字段来控制使用哪个sdk

目前卡壳在：live.js是封装所有直播函数的一个js文件，文件头引入了

import sw from './xxxxx'
import txfrom './xxxxx'
import roomStore from '../store/modules/room';
let liveObj;
if(roomStore.state.room.rtcType === 'Agora'){
    agora = agoraElectron;
  }else{
    agora = tencent;
  }
export default liveObj

上面两个引入是两个sdk封装的方法，当然，方法名字是一模一样的，只不过里面的逻辑不一样，各自使用各自的sdk
然后是通过判断rtcType的值来实现调用哪个，问题就是报错Cannot read property 'state' of null，原因也找到了，项目在启动的时候就直接加载了live.js文件，然后这个时候vuex还没有加载，
就算加载了，此时rtcType还是空值，做不到项目在运行状态下切换sdk。比如说我尝试了在live.js初始化函数并导出，main.js去调用，把已经加载完毕的store通过函数传给live.js，但是此时rtcType 还是空值，然后export default导出的就是undefined。
试了一下午也没办法做到运行状态下丝滑切换，请问有什么办法吗？

Answer 1

让【宝码香车】来帮您解答，本回答参考DeepSeek编写，并整理提供。

如果答案让您满意，请采纳、点赞、关注，非常感谢！
.  
每日一句正能量，让它带给您好心情：风雨过后的彩虹，才更懂得珍惜的重量。
.  

Vue2 双SDK动态切换解决方案

你遇到的问题是由于模块加载时机导致的，Vuex 在模块加载时还未初始化。以下是几种可行的解决方案：

方案1：使用工厂函数延迟初始化

// live.js
import sw from './xxxxx'
import tx from './xxxxx'


let liveObj = null;


export function initLive(store) {
  if (liveObj) return liveObj;
  
  const rtcType = store.state.room.rtcType;
  liveObj = rtcType === 'Agora' ? sw : tx;
  return liveObj;
}


export default {
  install(Vue, { store }) {
    Vue.prototype.$live = initLive(store);
  }
};

然后在 main.js 中使用：

import live from './live'
import store from './store'


Vue.use(live, { store });

方案2：使用动态导入

// live.js
export default {
  async getSDK() {
    const store = await import('../store/modules/room');
    const rtcType = store.state.room.rtcType;
    return rtcType === 'Agora' 
      ? (await import('./xxxxx')).default 
      : (await import('./xxxxx')).default;
  }
};

使用时：

import live from './live'


live.getSDK().then(sdk => {
  // 使用sdk
});

方案3：使用响应式封装

// live.js
import sw from './xxxxx'
import tx from './xxxxx'


export default {
  create(store) {
    return {
      get sdk() {
        return store.state.room.rtcType === 'Agora' ? sw : tx;
      }
    };
  }
};

方案4：使用插件模式（推荐）

// live-plugin.js
import sw from './xxxxx'
import tx from './xxxxx'


export default {
  install(Vue, { store }) {
    Object.defineProperty(Vue.prototype, '$live', {
      get() {
        return store.state.room.rtcType === 'Agora' ? sw : tx;
      }
    });
  }
};

在 main.js 中：

import LivePlugin from './live-plugin'


Vue.use(LivePlugin, { store });

最佳实践建议

1. 推荐方案4，它最符合Vue插件模式，且能响应式更新
2. 在组件中使用计算属性来获取当前SDK：

computed: {
  currentSDK() {
    return this.$live;
  }
}

1. 考虑添加SDK切换时的清理和重新初始化逻辑，避免内存泄漏

这些方案都能解决你的模块加载时机问题，并支持运行时动态切换SDK。方案4是最优雅的解决方案，它利用了Vue的响应式系统，当rtcType变化时会自动更新。