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 字段數據
});