组件通信

YM

2024-05-11 633ddfbd1a0a83f549553d8467241609037a5f78

组件通信

 electron/main.ts

@@ -48,7 +48,7 @@
    require('electron-reload')('../', {
      electron: require(elePath)
    })
    win.loadURL('http://localhost:8005')
    win.loadURL('http://192.168.3.203:8005')
    win.webContents.openDevTools()
  } else {
    win.loadURL(path.join(__dirname, 'index.html'))

 src/child.ts

@@ -21,7 +21,7 @@
    name: 'app-content',
    // - 必选，微应用的入口
    entry: '//182.92.203.7:3007/books/test/',
    // entry: '//192.168.3.10:8080',
    // entry: '//192.168.3.203:8080',
    // - 必选，微应用的容器节点的选择器或者 Element 实例
    container: '#container',
    // - 必选，微应用的激活规则

 src/main.ts

@@ -8,11 +8,11 @@
import router from './router'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import toolClass from '@/assets/js/toolClass'
import request from "@/plugin/axios/index.ts"
import "./child.ts" 
import request from '@/plugin/axios/index.ts'
import './child.ts'

const handleGetToken = () => {
  return localStorage.getItem("token");
  return localStorage.getItem('token')
}

// 路由执行之前的一些操作
@@ -20,22 +20,22 @@
  // 如果有token
  if (handleGetToken()) {
    // 是否是登录页面，直接到首页
    if (to.path === "/login") {
      next({ path: "/transmission" });
    if (to.path === '/login') {
      next({ path: '/transmission' })
    } else {
      // 如果不是登录页面，跳转到目标的页面
      next();
      next()
    }
  } else {
    // 没有token
    if (!to.meta || !to.meta.auth) {
      // 在免登录白名单，直接进入
      next();
      next()
    } else {
      next(`/login?redirect=${to.fullPath}`); // 否则全部重定向到登录页
      next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
    }
  }
});
})

const app = createApp(App)
app.provide('toolClass', toolClass)
@@ -48,3 +48,26 @@
}

app.mount('#parentApp')

// qiankun主应用与微应用通讯
import { initGlobalState, type MicroAppStateActions } from 'qiankun'
import state from './qiankunState/state'

state.bb = (data) => {
  console.log(data);
}

// 初始化 state
const actions: any = initGlobalState(state)
// 监听state变化
actions.onGlobalStateChange((state: any, prev: any) => {
  // state: 变更后的状态; prev 变更前的状态
  console.log("父层change：",state, prev)
})
// 设置state的值
actions.setGlobalState(state)

console.log(actions,"actions");

// 移除当前应用的状态监听，微应用 umount 时会默认调用
// actions.offGlobalStateChange()

 src/qiankunState/state.ts

New file
@@ -0,0 +1,6 @@
const state = {
  aa: 1
}


export default state

 vite.config.ts

@@ -9,10 +9,10 @@
  base:"./",
  plugins: [
    vue(),
    // electron({
    //   // 配置 Electron 入口文件
    //   entry: 'electron-commonJS/main.js'
    // }),
    electron({
      // 配置 Electron 入口文件
      entry: 'electron-commonJS/main.js'
    }),
  ],
  resolve: {
    alias: {
@@ -26,7 +26,7 @@
    cors: true, // 允许跨域
    hmr: true,
    headers: {
      "Access-Control-Allow-Origin": "*", // 允许跨域访问子应用页面
      "access-control-allow-origin": "*", // 允许跨域访问子应用页面
    },
  },
  define: {