Vuex从了解到实际运用,彻底搞懂什么是Vuex(一)

简介: Vuex全局状态管理是任意组件之间的通信的解决方案,本文讲vuex基础,帮助初学者更好的入门

什么是Vuex全局状态管理

一句话来说,Vuex全局状态管理是任意组件之间的通信的解决方案

Vuex实现原理

  • 借助于Vuex提供的单例,可供任意组件的调度
  • 它里面提供了一些对应的状态和方法,比如 state, getter, mutation, action, modules...

组件通信

为了帮助大家更好的去理解,下面举例几种组件通信的情况

多级组件通信

如下图:

在这里插入图片描述

1.组件App.vue想要给组件EmitterComponent.vue传值,那就需要使用Props进行属性传值,假如父组件给子组件传了data,子组件想要修改data的值,那就需要使用 $ emit自定义事件传值给父组件让其修改。简单来说就是“谁传值谁修改”
2.如果下面还有子组件,那从上往下传值需要一层一层的使用Props进行传值,从下往上也需要一层一层的使用 $ emit自定义事件传值。props和 $ emit自定义事件传值能满足大部分情况下的传值操作,但是有些情况会很麻烦

同级组件通信

如下图,只使用props和 $ emit 进行同级组件通信

在这里插入图片描述
1.下面两个组件想要进行通信的时候,就需要第一个组件先使用$ emit传值给父组件,再有父组件通过Prop传值给第二个组件。如果下面有很多层子组件的时候会非常的麻烦。、

使用Vuex进行组件通信

如下图,使用Vuex进行组件通信

在这里插入图片描述

1.谁想要data的值都能直接访问Vuex实现,并且谁修改了Vuex中data的值进行了修改,都会进行一个监听,用过这个data的组件都会进行更新

所以Vuex的一个核心意义总结来说:我们可以把很多组件需要用到的一个属性抽离出来放到Vuex中作为一个全局的属性可供任意组件使用。

在这里插入图片描述

关注我,后面会继续为大家介绍,组件如何从Vuex中获取,修改值的一系列操作

相关文章
|
2月前
|
存储 JavaScript API
Vuex 和 Pinia 的区别
【10月更文挑战第18天】Vuex 和 Pinia 都有各自的优势和适用场景。Vuex 适合较为大型和复杂的项目,强调严格的架构和流程;而 Pinia 则更适合中小型项目以及对灵活性和简洁性有更高要求的开发者。你可以根据项目的具体需求和个人喜好来选择使用哪一个状态管理库。
621 59
|
4月前
|
存储 资源调度 JavaScript
学习使用Vuex
【8月更文挑战第5天】学习使用Vuex
51 5
|
5月前
|
存储 缓存 JavaScript
VUEX 的使用学习一
VUEX 的使用学习一
45 0
|
7月前
|
JavaScript 前端开发 中间件
vuex/redux的区别
vuex/redux的区别
105 2
|
7月前
|
存储 JavaScript
vuex和pinia区别
vuex和pinia区别
454 0
|
7月前
|
存储 JavaScript 前端开发
Vuex 和 Redux 的区别?
Vuex 和 Redux 的区别?
96 1
|
7月前
|
存储 JavaScript
Vuex和Redux的区别
Vuex和Redux的区别
|
7月前
Vuex相关面试题
Vuex相关面试题
79 2
|
7月前
(学习笔记)抛弃 Vuex,使用 Pinia
(学习笔记)抛弃 Vuex,使用 Pinia
68 1
|
7月前
|
存储 JavaScript 前端开发
redux和Vuex的使用与区别
redux和Vuex的使用与区别
77 0