今日学习内容:
1.组件其他通信方式
平行组件
在开发中,可能会存在==没有关系的组件通信==,比如有个博客内容显示组件,还有⼀个表单提交组件,我们现在提交数据到博客内容组件显示,这显示有点费劲.
为了解决这种问题,在vue中我们可以使⽤event bus,创建**中央事件总线**
**vm.$emit(**eventName, ...args):触发==当前实例上==的事件。附加参数都会传给监听器回调。
**vm.$on()**: 监听==当前实例上==的自定义事件。事件可以由 `vm.$emit` 触发。回调函数会接收所有传入事件触发函数的额外参数。
组件多层嵌套 provide&inject
⽗组件 provide来提供变量,然后再子组件中通过inject来注⼊变量.无论组件嵌套多深
实际上,你可以将依赖注入看作是“**l·”**,除了:
父组件不需要知道哪些子组件使用它 provide 的 property
子组件不需要知道 inject 的 property 来自哪里
2. Vuex的概念及使用
Vuex是一个专门为vue.js设计的==集中式状态管理架构==。
状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态。简单的说就是data中需要共用的属性。
公共仓库,保存所有组件能共用的数据
## 为什么需要Vuex
企业开发中遇到的问题:组件之间共享数据
儿子想用祖先组件的数据,要层层传递。
兄弟组件之间想要传递数据,也要借助父组件。
## 使用Vuex统一管理好处
- 能够在`Vuex`中集中管理共享的数据,易于开发和后期维护
- 能够高效地实现组件之间的数据共享,提高开发效率
- 存储在`Vuex`中的数据都是**响应式**的,能够实时保持数据与页面的同步
3.状态管理
- State:指的就是我们的==状态==,可以**暂时**理解为组件中`data`中的属性
- View:视图层,可以针对`State`的变化, 显示不同的信息
- Actions:这里的`Actions`主要是用户的各种操作,如点击、输入等,会导致状态发生变化
# state使用
1 导入Vuex.js
2 创建Vuex对象
3 给祖先组件加入store属性
4 页面中使用store中数据
## 导入Vuex.js
必须在引入Vue之后再引入Vuex
注意点:
只有需要共享的才放到vuex上, 不需要共享的数据依然放到组件自身的data上
## 在祖先组件中添加store属性
只要祖先组件中保存了Vuex对象 , 那么**祖先组件和所有的后代组件**就可以使用Vuex中保存的共享数据了
# Vuex修改数据
`Mutation`用于变更存储在`Store`中的数据。
- 只能通过`mutation`变更`Store`数据,不可以直接操作`Store`中的数据
- 通过这种方式,虽然操作稍微繁琐一些,但可以集中监控所有数据的变化,直接操作`Store`数据是无法进行监控的
## 定义Mutation函数
和store的state同级,定义mutations,里面定义修改sate中数据的方法。
## 调用
在组件中,通过`this.$store.commit(方法名)`完成触发。
## Mutation响应规则
`Vuex`的`store`中的`State`是响应式的,当`State`中的数据发生改变时,`Vue`组件也会自动更新。
# Vuex获取数据
## getters 定义
- Vuex允许我们在store中定义"getter" ,用于对state中存储的数据进行过滤操作。
- 就像vue生命周期中的computed一样,getter的返回值会根据它的依赖被**缓存**起来,且只有当它的依赖值发生了改变才会被重新计算。
|