Vue 微前端父子实时通讯解决方案

介绍

咱们知道微前端父子通讯方式有不少, 例如 location、Cookie、LocalStorage、window, 可是他们都有一个通病, 即没法实时监测变化, 例如换肤或者多语言切换, 想要应用到子项目, 必须进行页面的刷新, 而后才能通知到, 而尽可能少的改动原项目的原则, 不少Vue项目都是基于vuex进行全局数据的共享, 因此才诞生了vuex-micro-frontends.

特色

• 父子传递、实时变化
• 仅 1kb

安装

yarn add vuex-micro-frontends # npm install vuex-micro-frontends

使用

// master 主应用, 负责发送数据
import vuexMicroFrontends from "vuex-micro-frontends";

const store = new Vuex.Store({
  state: {
    name: "jack",
    age: 10,
    gender: "men"
  },
  plugins: [vuexMicroFrontends.send()] // 默认下发所有数据
  // plugins: [vuexMicroFrontends.send(['name', 'age'])] // 仅向子应用下发 name 和 age 数据
});

// slave, 子应用, 负责接受数据
import vuexMicroFrontends from "vuex-micro-frontends";

const store = new Vuex.Store({
  state: {
    name: ""
  },
  plugins: [vuexMicroFrontends.receive()] // 默认接受所有父组件传递的数据
  // plugins: [vuexMicroFrontends.receive(['name'])], // 仅接受 name 字段数据
});