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中。

文章“【Web前端基础知识】Vuex状态管理”已帮助

>>本文地址:https://www.ujiuye.com/zhuanye/2021/69830.html

THE END  

声明:本站稿件版权均属中公教育优就业所有,未经许可不得擅自转载。

1 您的年龄

2 您的学历

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

获取测试结果
  • 大前端大前端
  • 大数据大数据
  • 互联网营销互联网营销
  • JavaJava
  • Linux云计算Linux
  • Python+人工智能Python
  • 嵌入式物联网嵌入式
  • 全域电商运营全域电商运营
  • 软件测试软件测试
  • 室内设计室内设计
  • 平面设计平面设计
  • 电商设计电商设计
  • 网页设计网页设计
  • 全链路UI/UE设计UI设计
  • VR/AR游戏开发VR/AR
  • 网络安全网络安全
  • 新媒体与短视频运营新媒体
  • 直播带货直播带货
  • 智能机器人软件开发智能机器人
 

快速通道fast track

近期开班时间TIME