class Store {
  constructor(initialState) {
    this.state = { ...initialState };
    this.listeners = [];
  }

  // 获取当前状态
  getState() {
    return this.state;
  }

  // 更新状态并通知监听器
  setState(newState) {
    this.state = { ...this.state, ...newState };
    this.listeners.forEach(listener => listener());
  }

  // 订阅状态变化
  subscribe(listener) {
    this.listeners.push(listener);
    // 返回取消订阅的函数
    return () => {
      this.listeners = this.listeners.filter(l => l !== listener);
    };
  }
}

// 初始化状态
const store = new Store({ count: 0 });

// 页面元素
const counterDisplay = document.getElementById('counter');
const addButton = document.getElementById('add');

// 同步 UI 到状态
function render() {
  counterDisplay.textContent = store.getState().count;
}

// 订阅状态变化
store.subscribe(render);

// 触发状态更新
addButton.addEventListener('click', () => {
  const current = store.getState().count;
  store.setState({ count: current + 1 });
});

// 初始渲染
render();

const userStore = new Store({ name: '', logged: false });
const themeStore = new Store({ darkMode: false });

themeStore.subscribe(() => {
  document.body.className = themeStore.getState().darkMode ? 'dark' : 'light';
});

class LoggerStore extends Store {
  setState(newState) {
    console.log('旧状态:', this.state);
    console.log('新状态:', newState);
    super.setState(newState);
  }
}