vue - 状态管理器 Vuex

状态管理

vuex是一个专门为vue.js设计的集中式状态管理架构。 没理解 ! ! !

那么我们来看下边这张图:

当我们的应用遇到多个组件共享状态时,会需要多个组件依赖于同一状态抑或是来自不同视图的行为需要变更同一状态;传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。在搭建如上结构页面时,你可能会对 vue 组件之间的通信感到崩溃 ,特别是非父子组件之间通信,此时就应该使用vuex,轻松可以搞定组件间通信问题。

简单来说,vuex 就是对 vue 应用中多个组件的共享状态进行集中式的管理(读/写)

下边来介绍一下vuex的几个主要知识点:

mutations:是Vuex修改state的唯一推荐方法。该方法只能进行同步操作,且方法名只能全局唯一,也可以由actions中的commit('mutation 名称')来触发。

actions:actions和上面的Mutations功能基本一样,不同点是,actions是异步的改变state状态,而Mutations是同步改变状态。

同步的意义在于这样每一个 mutation 执行完成后都可以对应到一个新的状态(和 reducer 一样),这样 devtools 就可以打个 snapshot 存下来,然后就可以随便 time-travel 了。如果你开着 devtool 调用一个异步的 action,你可以清楚地看到它所调用的 mutation 是何时被记录下来的,并且可以立刻查看它们对应的状态----尤雨溪

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

state:页面状态管理容器对象。集中存储Vue components中data对象的零散数据,全局唯一,以进行统一的状态管理。页面显示所需的数据从该对象中进行读取,利用Vue的数据响应机制来进行高效的状态更新。

getters:state对象读取方法。Vue Components通过该方法读取全局state对象。

posted @ 2017-11-13 15:54  小白~-  阅读(67361)  评论(0编辑  收藏  举报