前情回顾

【Vue】父子组件通信方法整理 | Rean’s Blog (rean-schwarze.github.io)

我们都知道在Vue里面，父子组件通信有非常多方法，也都挺好用的，那么问题来了，如果两个组件不是父子关系，又要怎么办呢？

踩坑实录

是的没错，我又来给大家排雷了，这个问题乍一看好像也不是一个很偏的问题，网上一搜也有很多文章，但是里面绝大部分方法我都试过了，就是不行，哈哈

利用事件总线

据说这个是官网就有的一个方法，还有图有真相

然而我在官方文档（简介 | Vue.js (vuejs.org)）中，其实并没有找到这段

大家也不用试了，我试过了，真不行，而且这个一看还用var的，一看就很老了！（后来一看那个教程是17年的草。。。。。。。。。

Vuex

下面有请第二位嘉宾：Vuex

官网是这么说的：

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的**状态 (state)**。Vuex 和单纯的全局对象有以下两点不同：

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

Vuex本质上也是一种本地存储，比localStorage的单纯值传递多了方法、属性、异步方法等功能。但是因为是将内容本地化，所以就会被在浏览器中获取到。

看上去也很美好，但大家也不用试了，我试过了，反正就是也是各种问题（后面一看这个插件最后更新是21年了，虽然也说不上很老，但是在我这里就是不行！

应该还有其他，但是这里就不一一列举了！

真神降临

总之卡了很久，终于在一篇文章中看到了——PubSubJS 库（醒了很久还是很感动（（

pubsub的优点：组件之间的通信没有任何位置的限制

首先安装：

cnpm install pubsub-js -D

使用方法

发送消息

首先引入：

import PubSub from 'pubsub-js'

然后在负责发送信息的函数中：

PubSub.publish('handleCollapse')

publish内的内容根据自己需要写就好，如果还有别的参数，就在后面跟着传就行PubSub.publish('userEvent',this.msg); //发布消息

订阅消息

处理接收的函数中：

PubSub.subscribe('userEvent',(name,data) => {
            // 处理
        })

然后在onMounted()里面hook一下

onMounted(()=>handleCollapse())

就可以了，真是简简又单单啊

没踩的坑

还有一种方法（Vue.observable），我没有试过，如果有朋友无聊，可以试试

// utils.js 文件
import Vue from 'vue'
// 创建响应式对象
export const state = Vue.observable({
  count: 1
})
 
export const mutations = Vue.observable({
  increase() {
    state.count++
  }
})

// 在 vue 文件中使用
<template>
  <div id="app">
    <button @click="increaseCount">+</button>
    {{ num }}
  </div>
</template>
 
<script>
import { state, mutations } from '@/utils/index'
export default {
  name: 'App',
  computed: {
    num() {
      return state.count
    }
  },
  methods: {
    increaseCount: mutations.increase
  }
}
</script>