state.js 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. /**
  2. *公共数据
  3. */
  4. import {initGlobalState} from 'qiankun';
  5. import store from '@/store';
  6. import router from '@/router';
  7. import Vue from 'vue';
  8. import {ACCESS_TOKEN} from "@/store/mutation-types"
  9. //定义传入子应用的数据
  10. export function getProps() {
  11. return {
  12. data: {
  13. publicPath: process.env.BASE_URL,
  14. token: Vue.ls.get(ACCESS_TOKEN),
  15. store,
  16. router
  17. }
  18. }
  19. }
  20. /**
  21. * 定义全局状态,并返回通信方法,在主应用使用,微应用通过 props 获取通信方法。
  22. * @param state 主应用穿的公共数据
  23. */
  24. export function initGlState(info = {userName: 'admin'}) {
  25. // 初始化state
  26. const actions = initGlobalState(info);
  27. // 设置新的值
  28. actions.setGlobalState(info);
  29. // 注册 观察者 函数 - 响应 globalState 变化,在 globalState 发生改变时触发该 观察者 函数。
  30. actions.onGlobalStateChange((newState, prev) => {
  31. // state: 变更后的状态; prev 变更前的状态
  32. console.info("newState", newState)
  33. for (const key in newState) {
  34. console.info("onGlobalStateChange", key)
  35. }
  36. });
  37. // 将action对象绑到Vue原型上,为了项目中其他地方使用方便
  38. Vue.prototype.$actions = actions;
  39. }