介绍
我们知道微前端父子通信方式有很多, 例如 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 字段数据
});
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。