xag-ai-utils

通用的工具类

Project setup

yarn add xag-ai-utils

qiankun

应用间的通讯

主应用

import { initGlobalState } from "qiankun"; 

const initialState = {
  //这里写初始化数据
};

// 初始化 state
const actions = initGlobalState(initialState);
actions.onGlobalStateChange((state, prev) => {//监听公共状态的变化
  console.log("主应用: 变更前");
  console.log(prev);
  console.log("主应用: 变更后");
  console.log(state);
});


// 发送消息
actions.setGlobalState({});

子应用

main.js：在mounted的生命周期里注入actions实例

import { actions } from "xag-ai-utils";
export async function mount(props) {
  actions.setActions(props); //注入actions实例
  render(props);
}

在vue 组件中使用

<template>
  <div>
    <div>这是子应用</div>
    <p>接收到的消息： {{mes}}</p>
    <button @click= "butClick">点击向父应用发送消息</button>
  </div>
</template>

<script>
import { actions } from "xag-ai-utils";
export default {
  data() {
    return {
      mes: '',
    }
  },
  mounted() {
    actions.onGlobalStateChange((state) => { //监听全局状态
      this.mes = state
    }, true);
  },
  methods:{
      butClick(){
          actions.setGlobalState({ project_id: '项目99'})//改变全局状态
      }
  }
}
</script>

应用间跳转

import { navigate } from 'xag-ai-utils';
navigate(keyPath.join('/'));