同源 tab 页之间的通信 localStorage 实现
// localUserListener.ts
function noop() {}
export class LocalListener {
key: string;
constructor(key) {
this.key = key;
// 回调只有在 set 不同值时才触发
window.addEventListener("storage", (e: StorageEvent) => {
if (e.key === key) {
this.handleStorage();
}
});
}
setItem(val) {
window.localStorage.setItem(this.key, JSON.stringify(val));
}
handleStorage() {}
clearListener() {
window.removeEventListener("storage", this.handleStorage);
}
}
type Params = {
storageKey: string,
changeCallback: () => void,
}
export default function userChangeFresh(
opt: Params = { storageKey: "", changeCallback: noop },
) {
const listener = new LocalListener(opt.storageKey);
listener.handleStorage = opt.changeCallback;
function onReducer(reducer) {
return (state, action) => {
const newState = reducer(state, action);
if (action.type === "user/fetchCurrent/@@end") {
const userInfo = newState.user.currentUser;
listener.setItem(userInfo.loginName);
}
return { ...newState };
};
}
return {
onReducer,
};
}
在 global.ts 中引入：
import userChangeFresh from "./localUserListener";
使用：
const opt = {
storageKey: "test",
changeCallback: () => {
window.location.reload();
},
};
app.use(userChangeFresh(opt));
