Vue3通用布局组件AppTopbar变更触发全页面更新的解决方案

AppTopbar.vue是所有页面的通用布局组件，核心代码如下：

AppTopbar.vue

<Dropdown v-model="selected" :options="storesLists" @change="onChange" 
optionLabel="name" :filter="true" />

onChange(event) {
    console.log(event.value.value);
    localStorage.setItem('shopid'); 
}

Products.vue相关代码如下：

Products.vue

import { useLayout } from '@/layout/composables/layout';

<template>
</template>

点击AppTopbar.vue中的Dropdown触发onChange事件时，仅当前组件自身受影响，需要实现该变更能触发Products.vue及所有页面做出响应，该如何解决？

以下是几种Vue项目中跨组件/页面同步状态的实用方案，按需选择：

方案1：使用Pinia/Vuex状态管理库（推荐） #

这是Vue生态中跨组件共享状态的标准方案，适配复杂业务场景：

1. 创建全局状态仓库，比如stores/shopStore.js：

import { defineStore } from 'pinia';

export const useShopStore = defineStore('shop', {
  state: () => ({
    currentShopId: localStorage.getItem('shopid') || ''
  }),
  actions: {
    setShopId(shopId) {
      this.currentShopId = shopId;
      localStorage.setItem('shopid', shopId);
    }
  }
});

2. 修改AppTopbar.vue的onChange方法：

import { useShopStore } from '@/stores/shopStore';

// ...
const shopStore = useShopStore();
onChange(event) {
  const shopId = event.value.value;
  shopStore.setShopId(shopId);
}

3. 在Products.vue及其他页面监听状态变化：

<script setup>
import { useShopStore } from '@/stores/shopStore';
import { storeToRefs } from 'pinia';
import { watch } from 'vue';

const shopStore = useShopStore();
const { currentShopId } = storeToRefs(shopStore);

// 监听店铺ID变化，执行业务逻辑
watch(currentShopId, (newId) => {
  if (newId) {
    // 示例：重新加载商品数据、更新页面内容等
    console.log('切换店铺，新ID：', newId);
  }
});
</script>

方案2：自定义事件总线（适合小型项目） #

如果不想引入状态管理库，可通过事件总线实现跨组件通信：

1. 创建事件总线实例，比如utils/eventBus.js：

import { createApp } from 'vue';
const app = createApp({});
export const eventBus = app;

2. 在AppTopbar.vue中触发全局事件：

import { eventBus } from '@/utils/eventBus';

onChange(event) {
  const shopId = event.value.value;
  localStorage.setItem('shopid', shopId);
  // 触发店铺ID变更事件
  eventBus.emit('shopIdChanged', shopId);
}

3. 在Products.vue中监听事件：

<script setup>
import { onMounted, onUnmounted } from 'vue';
import { eventBus } from '@/utils/eventBus';

const handleShopIdChange = (newId) => {
  // 处理店铺ID变更后的业务逻辑
  console.log('店铺ID更新为：', newId);
};

onMounted(() => {
  eventBus.on('shopIdChanged', handleShopIdChange);
});

onUnmounted(() => {
  // 组件销毁时移除监听，避免内存泄漏
  eventBus.off('shopIdChanged', handleShopIdChange);
});
</script>

方案3：监听localStorage变化（简单但有局限） #

利用storage事件监听localStorage修改，注意该事件仅在同源其他标签页触发，当前页面需手动补充触发：

1. 修改AppTopbar.vue的onChange方法：

onChange(event) {
  const shopId = event.value.value;
  localStorage.setItem('shopid', shopId);
  // 当前页面手动触发自定义事件
  window.dispatchEvent(new CustomEvent('shopIdChanged', { detail: shopId }));
}

2. 在Products.vue中监听变化：

<script setup>
import { onMounted, onUnmounted } from 'vue';

const handleShopIdChange = (e) => {
  const newId = e.detail || e.key === 'shopid' && e.newValue;
  if (newId) {
    console.log('店铺ID变更：', newId);
    // 执行对应业务逻辑
  }
};

onMounted(() => {
  // 监听其他标签页的storage修改
  window.addEventListener('storage', handleShopIdChange);
  // 监听当前页面的自定义事件
  window.addEventListener('shopIdChanged', handleShopIdChange);
});

onUnmounted(() => {
  window.removeEventListener('storage', handleShopIdChange);
  window.removeEventListener('shopIdChanged', handleShopIdChange);
});
</script>

内容的提问来源于stack exchange，提问作者praveen