vue怎么实现不同组件间（非父子组件间的通信），一个变化，另一个实时变化的效果

喜欢ヅ旅行 2022-04-11 11:48 233阅读 0赞

vue中，只有组件内的值，发生了变化，组件才会重新渲染，那我们怎么实现，两个不同组件，一个组件内的值发生变化，另一个组件也随之变化，比较常用的场景就是下面的例子了：

头部导航是一个单独的组件，侧边栏是一个组件，其余部分是内容区，想要的效果就是，当内容区的个人信息修改成功之后，希望头部右侧的个人信息（姓名和头像）也随着变化

分析：头部和内容区，不在同一个组件内，也不是父子关系

解决办法：通过vuex状态管理，实现组件间的通信问题

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70][]

具体实现：

内容区每次保存成功的时候，更新store中之前存储的数据

this.axios.post(url, params)
            .then(res => {
              if (res.data.status === 200) {
                this.$Message.success(`${res.data.msg}`)
                this.$store.dispatch('userInfo', params)//更新store中的userInfo中的值
              } else {
                this.$Message.error(`${res.data.msg}`)
              }
            })

头部导航条：通过计算属性获取vuex中userInfo中的值

computed:{
        user(){
          return this.$store.state.userInfo
        }
      },

<div style="float:right;">
              <Avatar v-if="!!user.user_headimg" :src="user.user_headimg" />
              <Dropdown trigger="click" style="margin-left: 20px;">
                <a href="javascript:void(0)" style="color:#fff;">
                  {
       {user.user_realname}}
                  <Icon type="md-arrow-dropdown" />
                </a>  
              </Dropdown>
    </div>

此时，当内容区发生变化，头部导航条的信息也就会随着发生变化了

注意：不要直接复制我的代码，只是作为演示说明，最重要的是掌握逻辑思路

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70]: /images/20220411/1d0a1c9c3ae8427db86e4ced76a1eca4.png