@hzdzh/qiankun-common

安装

npm install @hzdzh/qiankun-common -S

说明

该库是杭州大综合微前端项目下的公共库 包含了api、sdk、store，其中store是主应用和微应用的通信库，具体使用是

store

主应用和微应用的通信数据全部放在global模块下面，通过setGlobalState更新数据, 通过global获取数据

import { store as commonStore } from "@hzdzh/qiankun-common";

// 项目独立运行时 注册 (store是微应用的store)
commonStore.globalRegister(store);
// commit
store.commit("global/setGlobalState", { user: userInfo });


// 获取global中的数据
computed: {
  // 通过global获取user的信息
  ...mapState("global", {
    user: state => state.user
  }),
},

// 提交数据
methods: {
  // setGlobalState 是在 /common/src/store/global-register.js中定义的
  ...mapActions("global", ["setGlobalState"]),
  changeUsername() {
    // 也可通过 store.commit('global/setGlobalState', { user: '李四' }) 进行操作
    this.setGlobalState({
      user: { name: "李四" + Math.round(Math.random() * 100) }
    });
  },
}

store中的数据

{
  userInfo: {
    name: '',
    userId: '',
    department: '',
    phone: '',
  },
  baseData: {
    // 级别 市级 区县 镇街
    level: '',
    city: {
      name: '',
      code: '',
    },
    county: {
      name: '',
      code: '',
    },
    street: {
      name: '',
      code: '',
    },
    // 部门
    department: {
      name: '',
      id: '',
    },
    scene: {
      name: '',
      id: '',
    },
  },
}