声明:禁止转载!!此文仅用于学习使用!如有侵权联系删除。
一、 vuex
官方:https://vuex.vuejs.org/zh/guide/
1.what?
Vuex 是一个专为 解决 Vue.js 的响应式集中缓存的技术方案。
2. where?
遇到一个数据被很多页面的组件使用,或者一个数据多个页面组件都可以触发更新操作
-> 共享数据(单一模式)
-> 大型单页应用
3. how?
单向数据流
原理
- 先安装
- 创建 store ,定义 mutation 及 action
- 调用 action, 对数据进行操作
- 使用 store 访问数据
4. why?
易于管理,响应式,专为 vue 开发
二、 事件总线 (EventBus)
学习链接: https://blog.csdn.net/m0_46846526/article/details/118317794
1. what?
事件总线是一种为了同步多层级组件之间数据传递/事件触发而有的解决方案。
2. where?
用于多层级组件之间,事件触发/数据同步等逻辑操作。
3. how?
利用vue的事件触发机制线,实现总线。可以通过这条线上的事件订阅来获取每次触发时候的数据。
import Vue from 'vue'
const PBus = new Vue()
export default PBus
import PBus from './bus/PageBus.js'
PBus.$on('pageAlter', res => {/*逻辑操作*/}) // 监听
PBus.$emit('pageAlter', val) // 触发
PBus.$off() //取消所有的事件订阅;
PBus.$off('事件名') //取消指定事件名的;
PBus.$off('事件名', 回调) //取消指定事件名的,指定回调
4. why?
相比嵌套层级多,一层一层掉或者一层一层传递来说,传递速度快;
易于理解;
事件易于管理;
三、 区别
事件总线主要是用 订阅-发布模式进行数据的传递。
vuex 利用响应式可以实现数据的变化渲染,进行watch 修改,还具有 数据缓存 作用。
网友评论