Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理
应用的所有组件的状态并以相应的规则保证状态以一种可预防的方式发生 变化
Vuex也集中到Vue的官方调试工具devtools
extension提供了诸如零件配置的time-travel调试
状态快照导入出高等调试功能。
什么是状态管理模式?
让我们从一个简单的Vue计数应用开始
这个状态自管理应用包含一下几个部分
state驱动应用的数据
view,以声明方式将state映射到视图;
actions响应在view上的用户输入导致的状态变化。
以下是一个表示 “单向数据流” 理念的简单示意:
但是,当我们的应用遇到多个组件共享状态时,单项数据流的简洁很容易被破坏
多个视图依赖同一个状态。、
来自不同视图的行为需要变更同一状态。
对于问题一,传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件
的状态传递无能为力。
对于问题二,我们经常会采用父子组件直接引用或者通过事件来变更和同步状态
的多份拷贝,以上这些模式非常脆弱,通常会导致无法维护的代码。
因此,我们为什么不把组件的共享状态抽取出来,以一个全局单例模式管理呢?
在这种模式下,我们的组件构成了一个巨大的 视图 不管在树的那个位置,
任何组件都能获取状态或者触发行为。
通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性
我们的代码会变得更结构化且易维护。
这就是Vuex背后的基本思想,借鉴了Flux、Redux 和The Architeture。与其
他模式不同的是,Vuex是专门为Vue.js设计的状态管理库,已利用Vue.js的细粒度
数据响应机制来进行高效的状态更新。
如果你想交互式学习Vuex可以看这个 Scrimba上的Vuex教程 【也可以给我私信想和交流交流】
他将录屏和代码试验场混合在了一起,你可以随时暂停并尝试。
什么情况下我应用用手使用Vuex?
Vue可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和
长期效益进行权衡。
如果您不打算开发大型单页应用,使用Vuex可能是繁琐冗余的。确实如此——如果
您的应用够简单,您最好不要使用Vuex。一个简单的store模式 就足够您所需了
但是如果您需要构建一个中大型单页应用,您很可能会考虑如何更好的地在组建
外部管理状态,Vuex将会成为自然而然的选择,引用Redux的作者Dan Abramov
的话说就是 Flux架构就像眼镜:您自会知道什么时候需要他