Vuex 是什么？什么是“状态管理模式”？什么情况下我应该使用 Vuex？-前端-E先生的博客

大语言模型

Vuex 是什么？什么是“状态管理模式”？什么情况下我应该使用 Vuex？

admin • 2020-07-21 00:44:54 • 前端 • 阅读443

[导读]：Vuex安装关于 Vuex 的具体安装，就不在这里说了，这个官方还是比较清晰的，戳此进入。但是需要注意两点：在一个模块化的打包系统中，您必须显式地通过 Vue.use() 来安装 Vuex，比如： import...

　　Vuex安装

　　关于 Vuex 的具体安装，就不在这里说了，这个官方还是比较清晰的，戳此进入。但是需要注意两点：

　　在一个模块化的打包系统中，您必须显式地通过 Vue.use() 来安装 Vuex，比如：

　　　　import Vue from 'vue'

　　　　import Vuex from 'vuex'

　　Vue.use(Vuex) // 必须调用此函数来注入 Vuex

　　当使用全局 script 标签引用 Vuex 时，就不用那么麻烦了，直接引用进来就好，但要注意引用的先后顺序，如下：

　　// 在 Vue 之后引入 vuex 会进行自动安装

　　

　　

　　虽然 script 的方式看起来比较自动化，但是接触得多了，你就会明白模块化其实才是我们的最佳姿势。

　　Vuex是什么？

　　Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex也集成到Vue的官方调试工具devtools extension，提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能。

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

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

　　new Vue({

　　//state

　　data(){

　　return{

　　count:0

　　}

　　},

　　//view

　　template:`

　　<div>{{count}}</div>

　　`,

　　//actions

　　methods:{

　　increment(){

　　this.count++

　　}

　　}

　　})

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

　　state，驱动应用的数据源；

　　view，以声明方式将state映射到视图；

　　actions，响应在view上的用户输入导致的状态变化。

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

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

　　多个视图依赖于同一状态。

　　来自不同视图的行为需要变更同一状态。

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

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

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

　　这就是Vuex背后的基本思想，借鉴了Flux、Redux和The Elm Architecture。与其他模式不同的是，Vuex是专门为Vue.js设计的状态管理库，以利用Vue.js的细粒度数据响应机制来进行高效的状态更新。

　　如果你想交互式地学习Vuex，可以看这个Scrimba上的Vuex课程，它将录屏和代码试验场混合在了一起，你可以随时暂停并尝试。

　　vuex

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

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

　　如果您不打算开发大型单页应用，使用Vuex可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用Vuex。一个简单的store模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex将会成为自然而然的选择。引用Redux的

本文来自E先生的博客，如若转载，请注明出处：https://www.javajz.cn

Vuex,是什么,什么,是,“,状态,管理模式,”,Vuex

打赏

微信扫一扫

admin

vue2.0安装3.0安装,配置介绍功能模块

« 上一篇

IOSSafari与微信浏览器中点击事件失效的解决办法? --已解决！

下一篇 »

留言区

历史留言

欢迎加Easy的QQ