TvT.js
目录
主题颜色

主/子 - 双向通讯

此章节介绍主应用和子应用的是如何双向通讯的

详细API可参考qiankun官网对应章节: initglobalstatestateopen in new window

TIP

通讯实例预览: cos.icegl.cn/TvT.js/events#/plugins/qiankunTvt/eventsopen in new window

主应用部分

初始化 / 监听状态 ：

在src/main.js中增加了：

import { initglobalstate } from './qiankuncom/globalState.js'
initglobalstate()

src/qiankuncom/globalState.js对应的代码如下：

import { initGlobalState } from 'qiankun'
const state = {
  message: '初始化消息',
  curType: '',
  mouseInState: false
}
export const initglobalstate = () => {
  const actions = initGlobalState(state)
  actions.onGlobalStateChange((state, prev) => {
    console.log('主应用监听GlobalState状态更变', state, prev)
  })
  window.qiankunActions = actions
}

主应用发送给子应用消息 ：

在需要更改状态的地方增加：

window?.qiankunActions?.setGlobalState({
  message: '主应用发送给子应用的消息',
  curType: 'floatMove'
})

子应用部分

监听状态 ：

在需要更改状态的地方增加：

// 注意全站生命周期只注册一次，不要重复注册
window?.qiankunProps?.onGlobalStateChange((state, prev) => {
  console.log('子应用接收到主应用的消息', state, prev)
})

子应用发送给主应用消息 ：

在需要更改状态的地方增加：

window?.qiankunProps?.setGlobalState({
  message: '子应用发送给主应用的消息',
})

子应用状态同步 [ 高级 ]

此小节介绍子应用如何协同状态管理器 pinia同步主应用的状态，此部分已经在src/plugins/qiankunTvt/stores/index.jstvt的项目实践中，可参考此部分代码。

监听状态 ：

在src/app.jsx中增加：

import { useQiankunTvtStore } from 'PLS/qiankunTvt/stores/index'
qiankunTvtStore = useQiankunTvtStore()

async mount (props) {
    if (props) {
        props.onGlobalStateChange((state, prev) => {
            qiankunTvtStore.setGlobalState(state)
        })
        window.qiankunProps = props
    }
}

获得实时状态 ：

在需要更改状态的地方增

import { useQiankunTvtStore } from 'PLS/qiankunTvt/stores/index'
const qiankunTvtStore = useQiankunTvtStore() as any
qiankunTvtStore.floatMove // floatMove为子应用状态

更改状态后协同 ：

因为之前在src/app.jsx中注册了onGlobalStateChange，函数中定义了: qiankunTvtStore.setGlobalState(state)，所以当子应用状态发生改变时，会自动同步到主应用中。 详见src/plugins/qiankunTvt/stores/index.js：

import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useQiankunTvtStore = defineStore('qiankunTvtStore', () => {
    const globalState = ref({})
    const floatMove = ref(true)
    function setGlobalState(value) {
        globalState.value = value
        if (value.curType === 'floatMove') {
            floatMove.value = !floatMove.value
        }
    }
    return { floatMove, setGlobalState, globalState }
})

所以在需要更改状态的时候，直接更改状态即可。在代码实践中可见：src/plugins/qiankunTvt/pages/events.vue

window.qiankunProps?.setGlobalState({ mouseInState: true, curType: 'mouseIn' })
本页目录