[qiankun]主应用和子应用间通信报错：[vuex] do not mutate vuex store state outside mutation handlers.

最新推荐文章于 2025-03-24 17:06:16 发布

门前小小小树

最新推荐文章于 2025-03-24 17:06:16 发布

阅读量1.1k

点赞数

分类专栏： qiankun vue vuex 文章标签： vue 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_44263646/article/details/117468398

版权

报错情况：在这里插入图片描述
主要原因是主应用中定义的全局状态下发给子应用，子应用注册成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