VUE非父子组件通信

非父子组件通信

vue非父子组件传值方式，本文章整理了两种方式：vuex和总线bus。vuex相比于总线bus来说非常的稳定，推荐直接使用vuex。
我看其他的文章基本上是【点击导航栏回退的时候,去获取到前面query传的值】才会用到总线bus
下面介绍这两种通信方式

---

---

前言

1、Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件状态，并以相应的规则保证状态以一种可预测的方式发生变化。可以理解为：将多个组件共享的变量全部存储在一个对象里面，然后将这个对象放在顶层的 Vue 实例中，让其他组件可以使用，它最大的特点是响应式。一般情况下，我们会在 Vuex 中存放一些需要在多个界面中进行共享的信息。比如用户的登录状态、用户名称、头像、地理位置信息、商品的收藏、购物车中的物品等，这些状态信息，我们可以放在统一的地方，对它进行保存和管理。
2、bus其实就是一个发布订阅模式，利用vue的自定义事件机制，在触发的地方通过$emit向外发布一个事件,在需要监听的页面，通过$on监听事件。

---

一、vuex的使用

1.Vuex 插件的安装

npm install --save vuex@3.6.2

注意版本问题：vue 的 2.x 版本对应 vuex 的 3.x 版本，vue 的 3.x 版本对应 vuex 的 4.x 版本

2.创建 index.js

在 src 目录下新建 store 文件夹，创建 index.js文件引入、安装、创建并导出Vuex对象

import {
  satisfies
} from 'semver'
import Vue from 'vue'
import Vuex from 'vuex'

//1.安装插件
Vue.use(Vuex)

//2.创建对象
const store = new Vuex.Store({
  state: {
    counter: 1000,
    students: [{
        age: 20

      },
      {
        age: 21

      },
      {
        age: 24

      }
    ]
  },
  mutations: {
    increment(state) {
      state.counter++
    },
    decrement(state) {
      state.counter--
    }
  },

  actions: {

  },
  getters: {
    powerCounter(state) {
      return state.counter * state.counter
    },
    more20stu(state) {
      return state.students.filter(s => s.age > 20)
    },
    more20stuLength(state, getters) {
      return getters.more20stu.length
    },
    moreAgeStu(state) {
      return function (age) {
        return state.students.filter(s => s.age > age)
      }
    }
  },
  modules: {

  }
})
//3.导出使用
export default store

tore 对象中存放的东西是固定的，主要有：state、mutations、actions、getters、modules
vuex有以下四个核心概念，

state，用于存储状态（或数据）。
getters，用于对state中的状态（或数据）进行加工。
actions，里面的action函数，用于响应组件动作。
mutations，里面的mutation函数，用于操作状态（或数据）。

3.在 main.js 文件中挂载

在 main.js 文件中挂载使用

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'  //vuex挂载使用

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,  //vuex挂载使用
  components: { App },
  template: '<App/>'
})

4.使用数据

state、getters、actions和mutations都由Store管理，其中，
$store.state或context.state，访问state。
$store.getters或者context.state，访问getters。
$store.dispatch()或context.dispatch()，将触发action函数。
$store.commit()或context.commit()，将触发mutation函数。

<h2>{{$store.getters.more20stu }}</h2>
<h2>{{$store.getters.more20stuLength}}</h2>
<h2>{{$store.getters.moreAgeStu(18)}}</h2>

二、总线Bus（消息公交车）

1.在main.js上挂载

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

Vue.prototype.$bus = new Vue(); //消息公交车

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

2.传方法页面

因为总线Bus要求要先有监听在触发，才能成功监听，只能在A组件的beforeDestroy或者destroyed这两个生命周期钩子中触发函数$emit

beforeDestroy() {
    this.$bus.$emit("bus", "this is A");
    console.log("我发送成功了");
  }

3.接受方法页面

因为总线Bus要求要先有监听在触发，才能成功监听，只能在B组中的beforeCreate ，created，和beforeMount这三个钩子函数中监听$on

created() {
    this.$bus.$on("bus", (hei) => {
      console.log(hei);
    });
  },
  destroyed () {
    //新增代码看这里
    this.$bus.$off("bus");
    //新增代码看这里
  }