vuex介绍

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store (仓库)。
"store” 基本上就是一个容器,它包含着你的应用中大部分的状态( state )。
·Vuex 的状态存储是响应式的,当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
改变 store 中的状态的唯一途径就是显式地提交(commit) mutation。这样可以方便地跟踪每一人状态的变化。

 

Vuex为Vue Components建立起了一个完整的生态圈,包括开发中的API调用一环
(1) 核心流程中的主要功能
Vue Components 是 vue 组件,组件会触发 (dispatch) 一些事件或动作,也就是图中的 Actions:在组件中发出的动作,肯定是想获取或者改变数据的,但是在 vuex 中,数据是集中管理的,不能直接去更改数据,所以会把这个动作提交 (Commit) 到 Mutations 中
然后 Mutations 就去改变(Mutate) State 中的数据
当 State 中的数据被改变之后,就会重新染(Render) 到 Vue Components 中去,组件展示更新后的数据,完成一个流程。

(2)各模块在核心流程中的主要功能: 
Vue Components : Vue组件。HTML页面上,负责接收用户操作等交与行为,执行dispatch方法触发对应action进行回应
dispatch:操作行为触发方法,是唯 能执行action的方法

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

commit :状态改变提交操作方法。对mutation进行提交,是唯 能执行mutation的方法

mutations :状态改变操作方法。是Vuex修改state的唯一推荐方法,其他修改方式在严格模式下将会报错。该方法只能进行同步操作,且方法名只能全局唯一。操作之中会有一些hook暴露出来,以进行state的监控等。
state : 页面状态管理容器对象。集中存储Vuecomponents中data对象的零散数据,全局唯一,以进行统的状态管理。页面显示所需的数据从该对象中进行读取,利用Vue的细粒度数据响应机制来进行高效的状态更新。
getters : state对象读取方法。图中没有单独列出该模块,应该被包合在了render中,Vue Components通过该方法读取全局state对象。

总结:
Vuex 实现了一个单向数据流,在全局拥有一个 State 存放数据,当组件要更改 State 中的数据时,必须通过Mutation 提交修改信息,Mutation 同时提供了订阅者模式供外部插件调用获取 State 数的更新。而当所有异步操作作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走 Action,但 Action 也是无法直接修改State 的,还是需要通过Mutation 来修改State的数据。最后,根据 State 的变化,染到视图上。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值