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

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

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

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

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

具体实现：

内容区每次保存成功的时候，更新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>

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

 

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