为什么用Vuex的介绍

单向数据流

以下是“单向数据流”概念的极简说明：

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

-多个视图依赖于同一个状态。-不同观点的行为需要改变相同的状态。至于第一个问题，对于多层嵌套组件来说，传递参数的方法会非常繁琐，对于兄弟组件之间的状态传递也无能为力。

对于第二个问题，我们经常使用父子组件通过事件直接引用或更改和同步状态的多个副本。这些模式非常脆弱，经常导致代码无法维护。

因此，我们为什么不提取组件的共享状态，并以全局单一模式来管理它们呢？在这种模式下，我们的组件树形成了一个巨大的“视图”，无论在树的哪个位置，任何组件都可以获得状态或触发行为！

此外，通过定义和隔离状态管理中的各种概念并实施某些规则，我们的代码将变得更加结构化和易于维护。

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

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

虽然Vuex可以帮助我们管理共享状态，但它也附带了更多的概念和框架。这需要在短期和长期利益之间进行权衡。

如果您不打算开发大型单页应用程序，使用Vuex可能会很麻烦且多余。确实如此。如果你的应用足够简单，最好不要用Vuex。一辆简单的全球活动巴士就足够了。但是，如果需要构建一个中大型的单页应用程序，很可能会考虑如何更好地管理组件外的状态，Vuex将成为自然的选择。引用Redux的作者丹阿布拉莫夫的话：

Flux架构就像眼镜：你会知道什么时候需要它。

如果不使用Vuex，

假设有两个页面具有相同的数据，即不同的页面布局：

密码

第1页. vue

模板div h2我是第一页/H2 ul class=' ul _ list ' liv-for=' items ' p class=' name '商品：{{item。name } }/p p p class=' price ' price:{ { item . price } }/p/Li/ul/Div/模板脚本导出默认值{data () {return {items: '赣州橙'，price: '8.8' }，{name: '新疆哈密瓜'，price: '2.0'}，{ name 3: '山东枣'，price: '3.2' }，{ name 33333336

模板div h2我是第二页/H2 ul class=' ul _ listpage 2 ' liv-for=' items '中的项目' p class=' name '商品：{{item。name } }/p p p class=' price ' price:{ { item . price } }/p/Li/Ul/div/模板脚本导出默认值{data () {return {items: '赣州橙'，price: '8.8' }，{name: '新疆哈密瓜'，Price: '2.0' }，{ name 3: '山东枣'，price: '3.2' }，{ name 33333336对于同一条数据，两页操作两次感觉还行。如果有10到20页需要这个，那么这就是崩溃，同步刷新数据是痛苦的。这就是为什么需要Vuex。简而言之：vuex是与多个组件共享数据以供共同使用，并且还共享该数据的状态(一个组件改变该数据的状态，其他组件也是如此)。

Vue官网对Vuex的解释：

每个Vuex应用的核心都是商店。“store”基本上是一个容器，它包含应用程序中的大部分状态。Vuex和纯全局对象有两个区别：

Vuex的状态存储具有响应性。当Vue组件从商店读取状态时，如果商店中的状态发生变化，相应的组件将相应地得到有效更新。您不能直接更改商店中的状态。改变存储中状态的唯一方法是显式提交)突变。这使得我们很容易跟踪每个状态的变化，这样我们就可以实现一些工具来帮助我们更好地理解我们的应用程序。摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。如果你想了解更多，请查看下面的相关链接