解决iframe页面之间的vuex状态管理

公司有一个很老的saas平台项目,最近改成了vue3 + vuex 来处理,还是html页面,不是.vue的,花了很久的功夫,终于解决了iframe之间,vuex状态共享的问题,特此记录一下~

/* 解决iframe通信的问题,主要是为了使用vuex状态管理 */
const mixin = {
    data() {
        return {
            globalStore: null,
        }
    },
    mounted: function () {
        /* 任何页面,只要用了vue,都可以直接使用 this.globalStore*/
        window.getStore = this.getStore;
        this.globalStore = this.getStore();
    },
    methods: {
        getStore: function () {
            if (window.top === window) {
                return this.$store;
            } else {
                return window.parent.getStore();
            }
        }
    }
}

在iframe页面的JS里面,写上mixins: [mixin],这样的话,就可以操作vuex里面的方法了~本人测试正常,如果有问题,欢迎指出

 

posted @ 2022-08-19 17:26  骑着小毛驴1688  阅读(661)  评论(0编辑  收藏  举报