发布观察者模式使用场景记录

真夜2025-12-21 13:51

1. 全局共享的数组请求

问题

当遇到全局共享的字典list挂载到vuex或者pinia等全局状态中供全局组件使用，但字典接口后端设置了token请求，如果是在没token进入时候就会遇到这样的情况

在App.vue组件中

js 复制代码

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>

export default {
  name: "App",
  created() {
    if(getToken()){
        this.$store.dispatch("getXXXList");
        this.$store.dispatch("getXXXList");
    }else{
        observer.add(getXXXList,this.$store)
    }
  },
  metaInfo() {
    
  },
};
</script>
<style scoped>

</style>

这样组件出时候加载就会发起两个请求，但是因为没有token弹出以上提示。

解决思路

可以使用发布订阅者模式，初始化时收集该类型的请求，等到有token时候（可以在登陆时候触发，也可以监听某个参数触发）执行该收集的列表。可以直接使用全局状态管理实现。

js 复制代码

//观察器

class Observer {
  constructor() {
    this.observers = [];
    this.store = null;
  }

  add(observer, store) {
    this.observers.push(observer);
    this.store = store;
  }
  notify() {
    if (!this.store) {
      console.error("Observer: store is not set");
      return;
    }
    console.log(this.store);

    this.observers.forEach((item) => {
      this.store.dispatch(item);
    });
    this.observers = [];
  }
}
const observer = new Observer();
export default observer;

最后在登陆时候notify就可以。这是单一场景下，如果涉及到其他的主题需要添加分类