Vue组件中的六种通信方式(下)

四、消息订阅和发布(pubsub)

原理:需要接收数据的组件订阅消息,提供数据的发布消息

作用:一种组件之间的通信方式,适合于任意组件间通信
使用步骤:
- 1.安装pubsub: npm i pubsub-js
- 2.在需要使用的组件中引入 import pubsub from “pubsub-js”
- 3.接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身
- ```
methods(){
  demo(data){......}
}
......
mounted() {
  this.pid = pubsub.subscribe('handler',this.demo) //订阅一个叫handler的消息
}
```
- 4.提供数据：pubsub.publish(‘handler’,数据)
- 5.最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。

五.vue3中provide和reject

使用场景:祖与后代组件间通信

使用套路:父组件有一个provide提供数据,后代组件中只需要inject中接收对应数据

具体写法
1.父组件中:

setup(){
.....
let car = recative({name:"奔驰",price:"40w"})
provide("car",car)
....
return {
car
}

}
2.子组件中

setup(){
  ....
  let car = inject("car")
  ....
  return{
    car
  }
}

六.Vuex

环境配置

下载vuex npm i vuex
在创建名为store的文件夹,在其下创建一个index.js文件

// 在store 下的 index.js文件中
// 导入vuex 和vue
import vue from "vue"
import Vuex from "vuex"
// vuex是个插件必须全局使用 要用到Vue.use
Vue.use(Vuex)

// 配置actions,mutations,state三个配置对象
const actions = {}
const mutations ={}
const state = {}
export default {}

脚手架的入口文件main.js中导入

//在main.js中    然后导入配置store配置项既可以了
import vue from "vue"
import store from "./store/index.js"
new Vue({
  render:h=>h("#app")
  store
}).$mount("#app")

简单使用

// 在store 下的 index.js文件中
// 导入vuex 和vue
import vue from "vue"
import Vuex from "vuex"
// vuex是个插件必须全局使用 要用到Vue.use
Vue.use(Vuex)

// 配置actions,mutations,state三个配置对象
const actions = {
  // 响应组件的handler1事件 然后提交给mutations配置对象
  // value 是组件传过来的数据
  handler1(context,value){
    context.commit("handler2",value)
  }
}
const mutations ={
   // 整正处理组件传入数据的配置对象就是mutations
  handler2(state,value){
  	// 此处参数接收的state就是定义的state配置对象
    state.sum +=value
  }
}
const state = {
  sum :0
}
export default {
  actions,
  mutations,
  state
}

如何在组件中触发

// 组件中如何触发
<button @click="addSum">点击sum++</button>
 methods:{
   addSum(){
     // 通过dispatch会发送给actions配置对象
     // actions里面对数据做处理后 提交给mutations对象
     this.$store.dispatch("handler1",1)
     // 如果确定发送的数据就是此时的数据,也可以避免actions对象直接使用commit提交给mutations对象
     this.$store.commit("hander2",1)
   }
}