【vue学习】vuex

image.png

vuex的四种状态:案例分析

引入各模块

image.png

mutations & actions

image.png

state & getters

image.png

state 的使用【一般是从store.getters中获取数据】

image.png

方法调用

image.png

vuex官方给了我们一个更简单的方式来使用, 就是 {mapState, mapMutations, mapActions, mapGetters}

image.png
image.png

模块介绍

  • state:页面状态管理容器对象。集中存储Vue componentsdata对象的零散数据,全局唯一,以进行统一的状态管理。页面显示所需的数据从该对象中进行读取。

  • mutation:状态改变操作方法。它是Vuex修改state的唯一推荐方法,其他修改方式在严格模式下将会报错。该方法只能进行同步操作,且方法名只能全局唯一。通过 $store.commit调用其中的方法。

  • actions:操作行为处理模块。负责处理Vue Components接收到的所有交互行为。包含同步/异步操作支持多个同名方法,按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行,包括触发其他action以及提交mutation的操作。该模块提供了Promise的封装,以支持链式触发。通过$store.dispatch触发方法。

  • gettersVue Components通过该方法读取全局state对象。

小结:Vue组件Components接收交互行为,调用dispatch方法触发action相关处理,若页面状态需要改变,则调用commit方法提交mutation修改state,通过getters获取到state新值,重新渲染Vue Components,界面随之更新。

EventBus

Vue中可以来作为事件的沟通桥梁,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件,所以组件都可以上下平行地通知其他组件;但也就是太方便所以若使用不慎,就会造成难以维护的灾难,因此才需要更完善的Vuex作为状态管理中心,将通知的概念上升到共享状态层次。(标题链接可点开看看,该文有一部分内容提到了EventBus;这里就不另外写了)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 2,963评论 0 7
  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 3,139评论 0 6
  • ### store 1. Vue 组件中获得 Vuex 状态 ```js //方式一 全局引入单例类 // 创建一...
    芸豆_6a86阅读 740评论 0 3
  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应...
    白水螺丝阅读 4,684评论 7 61
  • Vuex 是一个专为 Vue 服务,用于管理页面数据状态、提供统一数据操作的生态系统。它专注于 MVC 模式中的 ...
    你的肖同学阅读 2,147评论 7 35