Vue.js与Vuex状态管理：组件间通信的艺术-CSDN博客

其他组件间通信

1.vuex

vuex是一个专门为vue.js应用程序开发的状态管理模式,它采用集中式存储管理所有组件的公共组件状并以相应的规则保证状态,以一种可以预测的方式变化

vuex核心:

store包含的对象:

1.state 存放状态,vuex中公共的状态 state看做所有组件的data用于保存所有组件的公共数据

2.getters 加工state成员给外界,可以对state中的成员加工后传递给外界

3.actions 异步操作,由于直接在mutation方法中进行异步操作，将会引起数据失效。所以提供了Actions来专门进行异步操作，最终提交mutation方法。

4.mutations state成员操作,可以理解为store的methods, mutations中保存着更改数据的回调函数,回调函数第一个参数是state 第二个参数是payload 也就是自定义参数调用mutations中回调函数,只能用store.commit(type,payload)

5.modules 模块化状态管理,模块化vuex可以让每一个模块拥有自己地 state mutation action getters 使的结构非常清晰方便管理

store 中存储的状态是响应式的，当组件从store中读取状态时，如果store中的状态发生了改变，那么相应的组件也会得到更新；

不能直接改变store中的状态。改变store中的状态的唯一途径是提交(commit)mutations。这样使得我们可以方便地跟踪每一个状态的变化。

vuex流程:

1.如果有异步操作页面通过this.$store.dispatcha将数据提交到action 在action中进行异步操作 action通过commit把对应的参数同步提交到mutations mutations 会修改state中对应的值

2.如果没有异步操作，那么我们就可以直接在组件内通过this.$store.commit提交状态在Mutations中自己编写的方法来达成对state成员的操作。

3.通过getters 把对应的值暴露出去在组件中通过this.$store.getters来动态获取state的值

特点:

vuex的特点是把数据单独隔离，形成一棵树状图。单独隔离就意味着它有自己的生态系统。输入和输出，其中action作为数据的输入，state作为数据的输出。

注意:

不能在组件中通过this.$store.state修改state中的状态

因为state是实时更新的，mutations无法进行异步操作，而如果直接修改state的话是能够异步操作的，当你异步对state进行操作时，还没执行完，这时候如果state已经在其他地方被修改了，这样就会导致程序存在问题了。所以state要同步操作，通过mutations的方式限制了不允许异步。

mutation是中只允许写同步代码不允许有异步代码

2.路由传参

在开发单页面应用时，有时需要进入某个路由后基于参数从服务器获取数据，那么我们首先要获取路由传递过来的参数，从而完成服务器请求

传参方式:

params

页面刷新数据会丢失,如果提供了 path，params 会被忽略,`params` 不能与 `path` 一起使用

  this.$router.push({
          name: 'particulars',
          params: {
            id: id
          }
        })
//获取数据
this.$route.params.id

query

 this.$router.push({
          path: '/particulars',
          query: {
            id: id
          }
        })

//获取数据
this.$route.query.id

hash

//第一种写法
this.$router.push('/details/001#car')
//第二种写法
this.$router.push({ path: '/details/001', hash: '#car'})
//第三种写法
this.$router.push({ name: 'details', params: { id: '001' }, hash: 'car'})

//获取数据
$route.hash.slice(1)

props

 this.$router.push({
          path: '/particulars',
          params: {
            id: id
          }
        })
//路由配置
{ path: '/user/:id',                            
  component: User,
 props: true }
//获取数据:在页面中使用props接收数据

props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。
props:{a:1,b:'hello'}

props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。
props的第三种写法，值为函数

3.mixin(混入)

用法:

//定义混入新建一个mixin.js文件
export const "xxx" = {}

//注册混入
//全局混入(main.js)

  import {xxx} from './mixin'
Vue.mixin(xxx)

//局部混入
  import {hunhe,hunhe2} from '../mixin'
mixins:[hunhe,hunhe2]

特点:

所谓“混入”，就是把vue组件中共同的配置提取出来，单独用一个文件保存，比如叫mixin.js保存配置，使用时引入并配置即可使用。

混入文件mixin.js中有一个属性名，而data中未定义相同的属性名，那么值以“混入”中定义的为主，如果mixin.js中和data中有相同属性名，那么以data中配置的数据或方法为主，说白了“混入”不破坏你的代码。

“混入”中定义了钩子函数，而data中定义了相同名称的钩子函数那么钩子函数会特殊处理 “混入”中钩子函数先加载，组件中同名钩子函数后加载。

4.消息订阅与发布(pubsub)

用法:

//安装
npm i pubsub-js

//引入
   import pubsub from 'pubsub-js'

//接受数据
pubsub:subscribe("xxx",回调函数)
//提供数据
 pubsub.publish("xxxx",数据)
//取消订阅
beforeDestroy() {
     // this.$bus.$off('hello')
     pubsub.unsubscribe(this.pubId)
}

5.全局事件总线(GLobalEventBus)

用法:

//在main.js中安装全局事件总线
new Vue({
	el:'#app',
	render: h => h(App),
	// beforeCreate中模板未解析，且this是vm
	beforeCreate(){
		Vue.prototype.$bus = this	//安装全局事件总线
	}
})
//对想要接收到数据的组件进行自定义事件的绑定 
mounted(){
  // 绑定自定义事件
  this.$bus.$on('自定义事件名', (接收参数)=>{
    console.log('我是TestB组件，收到了数据', 接收参数);
  })
}
//触发全局事件总线
 methods:{
  // 触发事件,事件名不能重复
  触发事件方法名(){
    this.$bus.$emit('自定义事件名', 传递参数);
  }
}
//得到数据之后解绑事件
// 销毁对应自定义事件
beforeDestroy(){
  this.$bus.$off('自定义事件名')
}

全局事件总线是一种组件间通信方式,适用于任意组件间的通信全局事件总线其实就是一个中间介质，组件间的相互通信借助于这个中间介质，通过这个中间转换介质，从而完成数据的传递与接收，实现组件间的相互通信

全局事件总线实现了任意组件间的通信，有效简化了开发过程中一些数据传递的操作，同时也提高了程序的性能，但是值得注意的是，全局事件总线之所以叫全局，是因为任何组件都可以访问，这就导致如果大量组件都绑定了全局事件总线，难免会造成代码混乱，且自定义事件名可能发生重复的问题，所以在开发中，使用全局事件总线时要根据实际业务情况进行选择