用vuex管理页面数据(与redux)

2016-10-14  本文已影响0人  gonabe

概述

vuex借鉴了flux、redux的设计思想,将应用的状态和组件内状态进行了区分,将应用的公共状态汇聚到了一处统一管理,避免了组件之间的状态传递。使的复杂应用的状态变更更加清晰。

State

应用的总体状态树,一个object对象

Getter

个人觉得Getter不是必须的,可用vue的计算属性代替,设置Getter是为了方便计算属性的复用

Mutation

vuex中推荐的改变state的唯一的地方,类似于redux的reducer,不同的是mutation中不需要return一个新的状态对象,vuex内部对state设置了getter和setter,在mutation中直接设置属性的变更即可。

Action

个人觉得Action也不是必须的,文档中强调了action可以用来处理一些异步操作,但其实异步操作可以直接写在应用中或任何地方,只需在适当的时候触发store.commit('increment')即可

事件触发周期

用户触发事件修改页面状态会经过以下几个步骤:
1.dispatch一个action
2.action中做一些(异步)处理,触发commit
3.mutation中接受提交的commit判断type,并根据传来的数据以及之前的state,对state进行更新
4.更新完,getter中捕获更新事件,返回新值供vue组件进行渲染。

Plugin、Modules

此外vuex还提出了modules的概念,用来拆分全局状态
Plugin类似于redux的middleware,用来提供状态变更的钩子,以方便对变更的状态进行一些批量处理,something like log etc..

与react-redux的区别

react-redux,的全局数据流是通过每个组件的props逐层传递到各个子组件的。
vuex 的全局数据则是通过getter集成到了框架内部,每个全局属性并非逐层传递到子组件,而是通过数据绑定的方式直接连接到各子组件。

上一篇 下一篇

猜你喜欢

热点阅读