概述
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集成到了框架内部,每个全局属性并非逐层传递到子组件,而是通过数据绑定的方式直接连接到各子组件。