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