Real time communication solution of Vue micro front end

Time:2020-6-27

introduce

We know that there are many ways of parent-child communication in the micro front-end, such aslocationCookieLocalStoragewindowBut they all have a common problem that they can’tReal time monitoring of changesFor example, skin changing or multi language switching, if you want to apply it to a sub project, you must refresh the page, and then you can be notified. There are many principles to change the original project as little as possibleVueProjects are based onvuexSharing global data, so it was bornvuex-micro-frontends.

characteristic

  • Father son transmissionReal time change
  • 1KB only

install

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

use

//Master main application, responsible for sending data
import vuexMicroFrontends from "vuex-micro-frontends";

const store = new Vuex.Store({
  state: {
    name: "jack",
    age: 10,
    gender: "men"
  },
  plugins: [ vuexMicroFrontends.send ()] // all data is distributed by default
  // plugins: [ vuexMicroFrontends.send (['name ','age']] // only distribute name and age data to sub applications
});
//Slave, sub application, responsible for receiving data
import vuexMicroFrontends from "vuex-micro-frontends";

const store = new Vuex.Store({
  state: {
    name: ""
  },
  plugins: [ vuexMicroFrontends.receive ()] // data passed by all parent components is accepted by default
  // plugins: [ vuexMicroFrontends.receive (['name ']], // only accept name field data
});