淘宝流量网站,城阳 网站建设,WordPress怎么文章分类,天津卓荣建设集团网站qiankun#xff1a; 是一种类似于微服务的架构#xff0c;是将一个大型应用拆分成若干个更小、更简单#xff0c;可以独立开发、测试和部署的子应用#xff0c;然后由一个基座应用根据路由进行应用切换#xff0c;主要是为了解决大型工程在变更、维护、扩展等方面的困难而…qiankun 是一种类似于微服务的架构是将一个大型应用拆分成若干个更小、更简单可以独立开发、测试和部署的子应用然后由一个基座应用根据路由进行应用切换主要是为了解决大型工程在变更、维护、扩展等方面的困难而提出的
qiankun的五种通信方式
1、localStorage/sessionStorage 2、通过路由参数共享 3、官方提供的 props 4、官方提供的 actions 5、使用vuex或redux管理状态通过shared分享
1、localStorage/sessionStorage
不用区分域名在 qiankun 中应用使用不同的域名也是可以获取得到主要运行在主应用上所以还是运行在同一个域名上也就是主应用的域名。 父应用 localStorage.setItem(token, 我是保存在本地的数据) 子应用 获取数据 const token localStorage.getItem(token) 2、通过路由参数共享
url 上拼接一些参数父子应用都可以通过 route 来获取到 const router new VueRouter({ ... }) router.beforeEach((to, from, next) { // 路由参数获取 }) 3、官方提供的 props
父应用把父路由的实例传递给子应用 props 接收
4、官方提供的 actions
返回action 实例并挂载了三个函数 1、onGlobalStateChange:在当前应用监听全局状态有变更触发 2、setGlobalState: 可以在应用中任何地方调用来修改全局状态 3、offGlobalStateChange:移除当前应用的状态监听微应用 umount 时会默认调用 具体示例 actions.ts文件import { initGlobalState, MicroAppStateActions } from qiankun;const state {cont:
};// 初始化 state
const actions: MicroAppStateActions initGlobalState(state);actions.onGlobalStateChange((state, prev) {// state: 变更后的状态; prev 变更前的状态
});// 定义一个获取state的方法下发到子应用
actions.getGlobalState function () {return state
}export default actions; 父应用 import actions from ./actions
const apps [{props: {parentActions: actions}}
]; 子应用 // 在子应用中使用就可以访问到这个parentActions了
this.$root.parentActions.setGlobalState({ cont: 我是父应用传下来的数据 })// 调用挂载在 actions 上的自定义方法获取当前的全局 state
this.$root.parentActions.getGlobalState() 5、shared 方案
父应用通过 vuex 或者 redux 维护一个 state然后创建一个 shared 和 actions 类似 主应用 // shared.tsimport store from ./store;class Shared {/*** 获取 Token*/public getToken(){return store.getState() || ;}/*** 设置 Token*/public setToken(token){store.dispatch({type: SET_TOKEN,payload: token});}
}const shared new Shared();export default shared; 子应用 import shared from ./shared// 获取Token
shared.getToken();
