Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension

(opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

# 什么是“状态管理模式”？

让我们从一个简单的 Vue 计数应用开始：

new Vue({// statedata () {return {count: 0}},// viewtemplate: `<div>{{ count }}</div>`,// actionsmethods: {increment () {this.count++}}
})

这个状态自管理应用包含以下几个部分：

state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入导致的状态变化。

以下是一个表示“单向数据流”理念的简单示意：

但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

多个视图依赖于同一状态。
来自不同视图的行为需要变更同一状态。

对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！

通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。

这就是 Vuex 背后的基本思想，借鉴了 Flux

(opens new window)、Redux (opens new window) 和 The Elm Architecture

(opens new window)。与其他模式不同的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

如果你想交互式地学习 Vuex，可以看这个 Scrimba 上的 Vuex 课程

(opens new window)，它将录屏和代码试验场混合在了一起，你可以随时暂停并尝试。

# 什么情况下我应该使用 Vuex？

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式

(opens new window)就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：

前端学习（2623）：Vuex初步识别相关推荐

前端学习梳理——wsdchong
前端学习梳理前言最近学习了一部分前端内容,今天重新梳理一下. 主要借鉴的书有<前端技术架构与工程>.<大前端入门指南>.<vue.js从入门到项目实战>.< ...
js怎么在一个div中嵌入另一网站_好程序员web前端学习路线分享HTML5常见面试题集锦一...
好程序员web前端学习路线分享HTML5常见面试题集锦,接下来将会持续为大家分享几篇HTML5常见面试题. 1.布局左边20% 中间自适应右边200px 不能用定位答案:圣杯布局/双飞翼布局或者 ...
前端学习资料及路线名称网站
IT前端学习资料及路线名称网站 JQuery文件网 https://code.jquery.com/jquery/ jQuery手册(pc端) http://jquery.cuishifeng.c ...
前端共享桌面_2020 前端学习路线总结，哎呦，不错哦！
2020 前端学习路线总结在 GitHub 看到一个很不错的前端学习路线图(roadmap),从前端基础到前端工程化,再到跨端,都有知识点的覆盖,非常推荐阅读. 图下面是我翻译的一个文字版,可以先看 ...
web前端学习之HTML
html标记语言是网页自动化测试所必须要掌握的,可以说是前端学习的基石,我都是在w3school上学的,所以就以此来讲.学习地址:http://www.w3school.com.cn/ HTML 指的 ...
2020 前端学习路线总结，哎呦，不错哦！
2020 前端学习路线总结在 GitHub 看到一个很不错的前端学习路线图(roadmap),从前端基础到前端工程化,再到跨端,都有知识点的覆盖,非常推荐阅读. 在前端领域混了这几年,总结了一套前端 ...
资深前端开发工程师分享：关于前端学习路线的一些建议
前言对于刚开始学习前端的伙伴俩说,问得最多的问题就是 --前端技术现在如此繁杂,我到底应该如何学习.这个话题太大了,几句话回答不好:也由于这个问题确实困扰了很多前端开发人员,所以我也就着手系统的输出 ...
2021 年前端学习路线总结
下面是我翻译的一个文字版,可以先看图再看文字. ✅ 表示个人推荐学习 ✳️ 表示可选择学习 ❇️ 表示不需要严格按照路线的先后顺序,可在任何时间补充这一块的知识 ❎ 表示个人不再推荐计算机网络掌握 ...
关于前端学习路线的一些建议（值得零基础拥有）
前言对于刚开始学习前端的伙伴俩说,问得最多的问题就是 --前端技术现在如此繁杂,我到底应该如何学习.这个话题太大了,几句话回答不好:也由于这个问题确实困扰了很多前端开发人员,所以我也就着手系统的输出 ...

前端学习（2623）：Vuex初步识别

Vuex 是什么？

# 什么是“状态管理模式”？

# 什么情况下我应该使用 Vuex？

前端学习（2623）：Vuex初步识别相关推荐

最新文章

热门文章