报错情况:
主要原因是主应用中定义的全局状态下发给子应用,子应用注册成vuex全局状态后,并修改了值更新给主应用,主应用也同步更新自己的全局状态,此时的全局状态是vuex注册过的,在主应用更改就会报错了。
主应用定义了全局数据(主要是登录的用户数据),用于下发给子应用:
store.js
import {
initGlobalState} from 'qiankun'
import {
reactive} from 'vue'
import registerGlobalModule from "./globalRegister"
// 让initialState变成可响应的:https://v3.cn.vuejs.org/guide/reactivity-fundamentals.html#%E5%A3%B0%E6%98%8E%E5%93%8D%E5%BA%94%E5%BC%8F%E7%8A%B6%E6%80%81
const initialState = reactive({
user: {
name: ''
}
})
// 初始化全局状态
const actions = initGlobalState(initialState)
// actions默认提供:监听全局状态变化:state 新状态, prev 旧状态
actions.onGlobalStateChange((state, prev) => {
console.log('【main change】', state, prev, initialState)
for (const key in state) {
initialState[key] = state[key]
}
})
// 获取globalState下的某个子级对象,无key,表示取全部
actions.getGlobalState = (key) => {
return key