主应用给子应用传值

主应用配置

// action.js
// 主应用当中将默认值提出来，方便其他功能也要修改
import { initGlobalState } from 'qiankun';

// 初始化需要传递的对象
export const action = initGlobalState({ route: '', test: '', inputValue: '' });

//micro-app.js
// 我们需要将之前单独提出来的action添加到我们注册的子应用的props当中作为在子应用中接收的参数
import { action } from './plugins/action';
import router from './router';
const microApps = [
	{
		name: 'micrapp',
		// 这个入口一般在项目中会区分开发环境和线上环境地址后缀，这里简化写死成开发环境
		entry: 'http://localhost:8001',
	    activeRule: '/#/micrApp/sub-config',
	    props: { action }
		},
	{
		name: 'sub-old',
		entry: 'http://localhost:8002',
	    activeRule: '/#/micrApp/sub-old',
	    props: { action }
	},
];

// header.vue
// 我这边是因为在主应用顶部存在搜索框，希望把搜索框内容传递给子应用。
// 需要将主应用的什么值传递给子应用就在哪个文件中进行配置

<template>
      <a-input-search
        v-model:value="inputValue"
        placeholder="请输入"
        enter-button
        @search="onSearch"
        style="width: 300px; margin-left: 60px"
      />
</template>
<script>
import { action } from '../plugins/action';
export default {
    setup() {
        const inputValue = ref("");
        const onSearch = () => {
        	// 调用setGlobalState()方法对初始值进行修改
            action.setGlobalState({ route: route.path, inputValue: inputValue.value, test: "x" });
        };
        return {
            action,
            inputValue,
            onSearch,
        };
    },
};
</script>
<style lang="less" scoped>
</style>

子应用配置(当主应用传值改变时监听)

// main.js
// 主应用和子应用通信方案
// 主应用创建共享状态：
const storeChange = async (props) => {
	// 微应用通过 props 获取共享状态并监听
	props.onGlobalStateChange &&
		// props.onGlobalStateChange()方法就是用来监听主应用传值，value就是我们在主应用中action.js中初始化的对象值，每当主应用中调用setGlobalState()方法改变值的时候，在这里都可以监听到最新的值
		(await props.onGlobalStateChange(async (value) => {
			console.log(value, 'value');
			render(props);
		}, true));
};


/**
 * qiankun生命周期
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 */
export const mount = async (props) => {
	console.log('[vue] props from main framework', props);
	await storeChange(props);
};