qiankun（乾坤）小试牛刀

实例搭建基础：

• 1、基座(vue3)： vue-qiankun (D:\webPro\vue-qiankun) 运行yarn serve http://localhost:4001/
• 2、子应用Vue(vue3): zkyth-front(C:\ProCode\招考vue\zkyth-front) 运行yarn serve http://localhost:10000/micro_vue
• 3、子应用React1(react16): sub-react(D:\webPro\qiankun-example\sub-react) 运行yarn start:sub-react http://localhost:7788/micro_react
• 4、子应用React2(react16): (D:\webPro\qiankun\react16) 运行yarn start:react16 http://localhost:7100

github地址： github.com/tianjiaoEst…

数据通信问题：

• 基座Vue3+vuex
• 子应用React16

1. 在基座配置store.js

import { initGlobalState } from 'qiankun'
import store from './store/index'
// 父应用的初始state
const initialState = {
  ...store.state,
  user: {
    name: 'zhangsan',
    age: 30,
  },
  page: {
    from: 'vue',
  },
}

const actions = initGlobalState(initialState)

actions.onGlobalStateChange((newState, prev) => {
  // state: 变更后的状态; prev 变更前的状态
  console.log('main change', JSON.stringify(newState), JSON.stringify(prev))
  Object.keys(newState).forEach((key) => {
    initialState[key] = newState[key]
  })
  console.log('main change after', store)
  store.dispatch('user/setUserName', 'AAAAA')
})

// 定义一个获取state的方法下发到子应用
actions.getGlobalState = function (key) {
  // 有key，表示取globalState下的某个子级对象
  // 无key，表示取全部
  return key ? initialState[key] : initialState
}

export default actions

2. 修改微应用配置，放到props

3. 子应用（React）修改index.js

4. 子应用（React）获取基座数据并显示，使用getGlobalState()获取基座数据

在子应用中使用Context配置上下文数据，同时将基座数据用useState生成响应式

5. 父子应用通信，分别在父子应用中添加数据监听 注意：这个数据并不是响应式的，如果需要则需要父子应用添加通信机制 父应用收到子应用发送的改变，处理store

收到基座数据改变，改变自身state

出现问题：

1、子应用react1没有配置路由，url切换回导致基座报错socket停止，尝试配置react-dom-router， 子应用 .env 配置 WDS_SOCKET_PORT=7788（子应用的端口号）