全局状态管理Store

• 通过发布订阅者模式封装一个全局Store

• main/micro/store/index.js

  export const createStore = (initData = {}) => (() => {
  let store = initData
  const observers = [] // 管理所有的订阅者，依赖
  // 获取store
  const getStore = () => store
  // 更新store
  const update = (value) => {
    if (value !== store) {
      // 执行store的操作
      const oldValue = store
      // 将store更新
      store = value
      // 通知所有的订阅者，监听store的变化
      observers.forEach(async item => await item(store, oldValue))
    }
  }
  // 添加订阅者
  const subscribe = (fn) => {
    observers.push(fn)
  }
  return {
    getStore,
    update,
    subscribe
  }
  })()

• 我们通过闭包，来缓存我们的要管理的数据

  主应用使用全局状态管理

• 在主应用中创建全局Store实例，并订阅数据更新

• main/src/utils/startMicroApp.js ```javascript import { registerMicroApps, start, createStore } from ‘../../micro’;

const store = createStore(); window.store = store;

store.subscribe((newValue, oldValue) => { console.log(newValue, oldValue); })

<a name="rz79H"></a>
# 子应用获取数据并更新数据
- vue3/src/main.js
```javascript
const storeData = window.store.getStore()
window.store.update({
  ...storeData,
  a: 778,
})

• 此时，我们在页面上访问的时候，会发现主应用监听到了数据的改变

  注意

• 需要注意的是，此方式，在子应用中监听数据变化，需要先订阅，才能监听到，

• 否则数据更新了，是无法监听到数据变化的。