400-650-7353

精品课程

您所在的位置:首页 > IT干货资料 > web前端 > 【Web前端基础知识】Vuex状态管理

【Web前端基础知识】Vuex状态管理

  • 来源:
  • 2021-08-30 17:10:05
  • 阅读()
  • 分享
  • 手机端入口

一、Vuex是什么

  Vuex是专门为Vuejs应用程序设计的状态管理工具。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。是状态管理,在main.js引入store,注入。只用来读取的状态集中放在store中; 改变状态的方式是提交mutations,这是个同步的事物; 异步逻辑应该封装在action中。Vuex可以理解为一种开发模式或框架,通过状态集中管理驱动组件的变化,应用级的状态集中放在store中,改变状态的方式是提交mutations,异步逻辑封装在action中。

应用场景有:单页应用中,组件之间的状态、音乐播放、登录状态、加入购物车vuex是一种集中式状态管理模式,它按照一定的规则管理状态,保证状态的变化是可预测的。

1、Vuex的构成

  由上图,我们可以看出Vuex有以下几个部分构成:

1)state

state是存储的单一状态,是存储的基本数据。

2)Getters

getters是store的计算属性,对state的加工,是派生出来的数据。就像computed计算属性一样,getter返回的值会根据它的依赖被缓存起来,且只有当它的依赖值发生改变才会被重新计算。

3)Mutations

mutations提交更改数据,使用store.commit方法更改state存储的状态。(mutations同步函数)

4)Actions

actions像一个装饰器,提交mutation,而不是直接变更状态。(actions可以包含任何异步操作)

5)Module

Module是store分割的模块,每个模块拥有自己的state、getters、mutations、actions。

  1. const moduleA = { 
  2.   state: { ... }, 
  3.   mutations: { ... }, 
  4.   actions: { ... }, 
  5.   getters: { ... } 
  6.  
  7. const moduleB = { 
  8.   state: { ... }, 
  9.   mutations: { ... }, 
  10.   actions: { ... } 
  11.  
  12. const store = new Vuex.Store({ 
  13.   modules: { 
  14.     a: moduleA, 
  15.     b: moduleB 
  16.   } 
  17. }) 
  18.  
  19. store.state.a // -> moduleA 的状态 
  20. store.state.b // -> moduleB 的状态 

6)辅助函数

Vuex提供了mapState、MapGetters、MapActions、mapMutations等辅助函数给开发在vm中处理store。

二、Vuex的设计思想

  Vuex的设计思想,借鉴了Flux、Redux,将数据存放到全局的store,再将store挂载到每个vue实例组件中,利用Vue.js的细粒度数据响应机制来进行高效的状态更新。

小结

  Vuex是通过全局注入store对象,来实现组件间的状态共享。在大型复杂的项目中(多级组件嵌套),需要实现一个组件更改某个数据,多个组件自动获取更改后的数据进行业务逻辑处理,这时候使用vuex比较合适。假如只是多个组件间传递数据,使用vuex未免有点大材小用,其实只用使用组件间常用的通信方法即可。

Vue组件简单常用的通信方式有以下几种:

1、父子通信:

父向子传值,通过props;子向父传值通过events ($emit);父调用子方法通过ref;provide / inject。

2、兄弟通信:bus

3、跨级嵌套通信:bus;provide / inject等。

Vuex可以理解为一种开发模式或框架,通过状态集中管理驱动组件的变化,应用级的状态集中放在store中,改变状态的方式是提交mutations,异步逻辑封装在action中。

学习疑问申请解答
您的姓名
您的电话
意向课程
 

中公优就业

IT小助手

扫描上方二维码添加好友,请备注:599,享学习福利。

>>本文地址:
注:本站稿件未经许可不得转载,转载请保留出处及源文件地址。

推荐阅读

优就业:ujiuye

关注中公优就业官方微信

  • 关注微信回复关键词“大礼包”,享学习福利
QQ交流群
在线疑问解答
(加群备注“网站”)
IT培训交流群 加入群聊 +
软件测试 加入群聊 +
全链路UI/UE设计 加入群聊 +
Python+人工智能 加入群聊 +
互联网营销 加入群聊 +
Java开发 加入群聊 +
PHP开发 加入群聊 +
VR/AR游戏开发 加入群聊 +
大前端 加入群聊 +
大数据 加入群聊 +
Linux云计算 加入群聊 +
优就业官方微信
扫码回复关键词“大礼包”
享学习福利

测一测
你适合学哪门IT技术?

1 您的年龄

2 您的学历

3 您更想做哪个方向的工作?

获取测试结果
 
课程资料、活动优惠 领取通道