通用的工具类
yarn add xag-ai-utils
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('/'));