introduce

We know that there are many ways of micro-front-end parent-child communication, such as location, Cookie, LocalStorage and Window, but they all have a common problem, that is, they cannot monitor changes in real time, such as skin change or multi-language switch. If they want to be applied to sub-projects, they must refresh the page. Many Vue projects share global data based on Vuex, hence the creation of Vuex-micro-frontends.

The characteristics of

  • Father-child transmission, real-time change
  • Only 1 KB

The installation

yarn add vuex-micro-frontends # npm install vuex-micro-frontends
Copy the code

use

// master is 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 delivered by default
  Plugins: [vuexMicroFrontends. Send (['name', 'age'])] // Only name and age data are delivered to child applications
});
Copy the code
// slave, a sub-application that accepts data
import vuexMicroFrontends from "vuex-micro-frontends";

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