前端-陈旭辉-20230626

一、学习内容

1、平行组件

在开发中,可能会存在==没有关系的组件通信==,比如有个博客内容显示组件,还有⼀个表单提交组件,我们现在提交数据到博客内容组件显示,这显示有点费劲.

为了解决这种问题,在vue中我们可以使⽤event bus,创建中央事件总线

vm.$emit(eventName, ...args):触发==当前实例上==的事件。附加参数都会传给监听器回调。**

**vm.$on(): 监听==当前实例上==的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。

2、组件多层嵌套 provide&inject

⽗组件 provide来提供变量,然后再子组件中通过inject来注⼊变量.无论组件嵌套多深

实际上，你可以将依赖注入看作是“l·”，除了：

 父组件不需要知道哪些子组件使用它 provide 的 property

 子组件不需要知道 inject 的 property 来自哪里

3、vuex

3.1、什么是vuex

Vuex是一个专门为vue.js设计的==集中式状态管理架构==。

状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。

公共仓库，保存所有组件能共用的数据

3.2、为什么需要vuex

企业开发中遇到的问题：组件之间共享数据

儿子想用祖先组件的数据，要层层传递。

兄弟组件之间想要传递数据,也要借助父组件。

3.3、使用vuex的好处

• 能够在Vuex中集中管理共享的数据，易于开发和后期维护
• 能够高效地实现组件之间的数据共享，提高开发效率
• 存储在Vuex中的数据都是响应式的，能够实时保持数据与页面的同步
  
  

4、管理状态

4.1、单页面状态管理

• State：指的就是我们的==状态==，可以暂时理解为组件中data中的属性
• View：视图层，可以针对State的变化， 显示不同的信息
• Actions：这里的Actions主要是用户的各种操作，如点击、输入等，会导致状态发生变化
  
  

4.2、state使用

1） 导入Vuex.js

2） 创建Vuex对象

3） 给祖先组件加入store属性

4） 页面中使用store中数据

5、vuex数据修改

Mutation用于变更存储在Store中的数据。

• 只能通过mutation变更Store数据，不可以直接操作Store中的数据
• 通过这种方式，虽然操作稍微繁琐一些，但可以集中监控所有数据的变化，直接操作Store数据是无法进行监控的
  
  

6、vuex数据获取

• Vuex允许我们在store中定义"getter" ，用于对state中存储的数据进行过滤操作。
• 就像vue生命周期中的computed一样，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算