Vue单页应用中如何实现同级组件通信？以登录场景为例

这个场景我太熟了！之前做项目也碰到过一模一样的需求，给你几个靠谱的解决方案，你可以根据自己项目的规模和技术栈选最合适的：

这应该是最规范、最易维护的方式，把用户登录状态抽成全局共享的状态，不管是Header还是B组件，都从全局状态读取数据，更新时直接修改全局状态，所有用到这些状态的组件都会自动响应更新。

• 具体步骤：

  1. 定义全局状态，包含is_login、user_data，以及更新状态的方法（Vuex里是mutations/actions，Pinia里是actions）。
  2. Header组件直接使用全局状态，不用自己在data里维护这些变量。
  3. 不管是Header里登录还是B组件里登录，都调用全局的状态更新方法，同时把数据存入Cookie/localStorage做持久化，防止页面刷新后状态丢失。
  4. 页面初始化时，从Cookie/localStorage读取数据同步到全局状态。

• 代码示例（Vue2+Vuex）：

  // store/index.js
  import Vue from 'vue'
  import Vuex from 'vuex'
  import { getCookie, setCookie } from '@/utils/cookie' // 假设你有封装的Cookie操作工具
  
  Vue.use(Vuex)
  
  export default new Vuex.Store({
    state: {
      is_login: false,
      user_data: {}
    },
    mutations: {
      UPDATE_LOGIN_STATE(state, payload) {
        state.is_login = payload.is_login
        state.user_data = payload.user_data
        // 同步到Cookie做持久化
        setCookie('is_login', payload.is_login)
        setCookie('user_data', JSON.stringify(payload.user_data))
      }
    },
    actions: {
      initLoginState({ commit }) {
        // 页面加载时从Cookie恢复状态
        const is_login = getCookie('is_login') === 'true'
        const user_data = JSON.parse(getCookie('user_data') || '{}')
        commit('UPDATE_LOGIN_STATE', { is_login, user_data })
      }
    }
  })
  

  Header组件中使用：

  <template>
    <div class="header">
      <div v-if="is_login" class="user-info">欢迎，{{ user_data.nickname }}</div>
      <button v-else @click="openLoginModal">登录</button>
    </div>
  </template>
  <script>
  import { mapState } from 'vuex'
  export default {
    computed: {
      ...mapState(['is_login', 'user_data'])
    },
    mounted() {
      // 初始化状态
      this.$store.dispatch('initLoginState')
    },
    methods: {
      openLoginModal() {
        // 打开登录模态框逻辑
      }
    }
  }
  </script>
  

  B组件登录成功后更新状态：

  // 假设登录接口调用成功后拿到用户信息res.data.userInfo
  this.$store.commit('UPDATE_LOGIN_STATE', {
    is_login: true,
    user_data: res.data.userInfo
  })
  

如果你的项目比较小，不想引入Vuex/Pinia这种状态管理库，事件总线是个轻量又好用的选择，能快速实现同级组件的通信。

• 具体步骤：
  1. 在项目里创建一个全局的事件总线实例，比如在main.js中：

     import Vue from 'vue'
     Vue.prototype.$bus = new Vue()
     

  2. Header组件在挂载时监听一个自定义事件（比如login-status-updated），事件触发时重新从Cookie/localStorage读取数据更新视图：

     <script>
     import { getCookie } from '@/utils/cookie'
     export default {
       data() {
         return {
           is_login: false,
           user_data: {}
         }
       },
       mounted() {
         // 初始化读取Cookie
         this.refreshLoginState()
         // 监听登录状态更新事件
         this.$bus.$on('login-status-updated', () => {
           this.refreshLoginState()
         })
       },
       beforeDestroy() {
         // 组件销毁前移除监听，避免内存泄漏
         this.$bus.$off('login-status-updated')
       },
       methods: {
         refreshLoginState() {
           this.is_login = getCookie('is_login') === 'true'
           this.user_data = JSON.parse(getCookie('user_data') || '{}')
         }
       }
     }
     </script>
     

  3. B组件登录成功，把数据存入Cookie/localStorage后，触发这个自定义事件：

     // 登录接口成功，存完Cookie后
     setCookie('is_login', 'true')
     setCookie('user_data', JSON.stringify(res.data.userInfo))
     // 触发事件通知Header更新
     this.$bus.$emit('login-status-updated')
     

如果你的登录数据存在localStorage，可以利用浏览器原生的storage事件监听变化；但Cookie没有原生监听事件，需要自己封装或者用定时器轮询，这个方案更适合跨标签页的场景。

• localStorage监听示例（Header组件中）：

  <script>
  export default {
    data() {
      return {
        is_login: false,
        user_data: {}
      }
    },
    mounted() {
      this.refreshLoginState()
      // 监听localStorage变化
      window.addEventListener('storage', this.handleStorageChange)
    },
    beforeDestroy() {
      window.removeEventListener('storage', this.handleStorageChange)
    },
    methods: {
      refreshLoginState() {
        this.is_login = localStorage.getItem('is_login') === 'true'
        this.user_data = JSON.parse(localStorage.getItem('user_data') || '{}')
      },
      handleStorageChange(e) {
        // 只处理登录相关的key变化
        if (['is_login', 'user_data'].includes(e.key)) {
          this.refreshLoginState()
        }
      }
    }
  }
  </script>
  

  注意：storage事件只有在不同浏览器标签页修改localStorage时才会触发，如果是同一个页面内修改，不会触发，所以这种情况下建议配合手动触发，或者优先选择前两种方案。

• 项目规模较大、状态管理需求多：优先选Vuex/Pinia，代码更规范，便于后续维护；
• 小型项目、快速实现：事件总线足够简单高效；
• 有跨标签页同步需求：可以结合localStorage监听的方式。

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