我的账户
猩码学苑

专注C++开发菁英教育

亲爱的游客,欢迎!

已有账号,请

如尚未注册?

vuex的基础知识-2023.06.26

[复制链接]
霁后彩虹O 发表于 2023-6-27 23:51:44 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
今日学习内容:
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的返回值会根据它的依赖被**缓存**起来,且只有当它的依赖值发生了改变才会被重新计算。

回复

使用道具 举报

关注0

粉丝0

帖子59

发布主题
大家都在学
课堂讨论
一周热帖排行最近7x24小时热帖
关注我们
专注C++菁英教育

客服电话:18009298968

客服时间:9:00-21:00

猩码学苑 - 专注C++开发菁英教育!( 陕ICP备2025058934号-1 )

版权所有 © 陕西菁英数字科技有限公司 2023-2026