一个理解vuejs的状态管理工件vuex状态管理模式

最近有很多关于vuex的消息。当你看到眼睛发热的时候，你就去查资料，然后拉出一堆概念，比如通量、redux、状态、状态、大规模项目的必要性。看官方手册也是晕。

不过，我还是拿到了！我将从演示开始，用同一个最简单的演示演示两种情况下的代码编写：

只依赖vue.js依赖vue.js，也使用vuex技术。目的是通过比较介绍vuex的概念、优缺点。或许这是目前最接地气的vuex介绍。因此，无论如何，在了解vuex之前，你必须先了解vue.js。现在就开始。

假设一个微小的应用程序有一个显示数字的标签，两个按钮分别执行加一和减一的操作。用户界面如下所示：

如果你用vue，就是这样：

script src=' http :3359 UNP kg.com/Vue/dist/Vue . js '/script div id=' app ' p { { count } } button @ click=' Inc '/button @ click=' Dec '-/button/p/div script new Vue({ El : ' # app }，data(){ return { count : } }，methods: { inc () { this.count }，Dec () {this。count-}}})/script我写的代码可以直接复制到你的html中打开执行。您可以不费力地运行应用程序，并按下按钮查看界面上的响应是否如预期的那样。

整个代码结构非常清晰，代码就是代码，数据就是数据，这也是我一直非常喜欢vue.js的重要原因。代码是放在方法数组中的两个函数inc和dec，它们通过指令@click链接到button。而数据返回一个属性计数，该计数通过{{count}}绑定到标记p。

现在让我们来看看同一个演示应用程序，代码是用vuex完成的。同样，下面的代码不是代码片段，而是可以粘贴到您的html文件中，并使用浏览器直接打开和运行。

script src=' http :https://UNP kg.com/vue/dist/vue . js '/script script src=' http :https://UNP kg.com/[email protected]'/script div id=' app ' p { { count } } button @ click=' Inc '/button @ click=' dec '-/button/p/div script const store=new Vuex。Store({ state: { count: 0 }，突变后的： { Inc : state=state . count，dec : state=state . count-})const app=new Vue({ El : ' # app '，computed : { count(){ returnstore . state . count } }，methods 3: { Inc(){ store.commit(' Inc ')}，dec(){ store.commit(' dec ')})/)

新代码增加了对[emailprotected]脚本的依赖。这当然是因为你需要使用vuex技术，当然你需要参考它的methods array或者这两个方法，这和demo1是一样的；但是方法中的计算逻辑不再在函数中执行，而是提交给存储对象！这是一个新的对象！计数数据不再是数据函数返回的对象的属性；而是通过计算字段返回，计算字段中的代码不是自己计算的，而是转发给store对象的。再次存储对象！也就是说，以前在vue实例中完成的操作和数据计算不再由它们自己完成，而是交给对象存储。这一下子让我想起餐厅已经不洗碗了，交给政府认证的机构洗。

言归正传。存储对象是Vuex的一个实例。存储在存储中，有两个对象：状态对象和变体对象，其中状态放置状态，变体是一种可以导致状态改变的方法。如我们所见，当前状态对象中只有一个计数。而变体有两个成员，其参数是state。在函数体中，为状态中的count成员加1减1。

活着还是活着。现在，引入了一个存储对象，它接管了数据更新。vue实例不再需要自己计算，而是以引入新概念和新级别为代价。那么有什么好处(一个古老的土耳其问题)？

Vuex解决了组件之间共享相同状态的麻烦问题。当我们的应用程序遇到多个组件的共享状态时，它需要：

多个组件依赖于同一个状态。对于多层嵌套组件来说，传递参数的方法会非常繁琐，对于兄弟组件之间的状态传递也无能为力。这要求您学习如何在vue编码中的多个组件之间进行通信。来自不同程序集的行为需要更改相同的状态。我们经常使用父子组件直接引用或使用事件来更改和同步状态的多个副本。这些模式非常脆弱，经常导致代码无法维护。官网的一句话：Vuex是专门为Vue.js应用开发的状态管理模式。它使用集中式存储来管理应用程序所有组件的状态。这里的关键是集中存储管理。这意味着原本需要共享状态的更新需要组件之间的通信，但现在有了vuex，所有组件都与存储进行通信。问题自然会解决。

这就是为什么官网再次提到Vuex在构建大规模应用中的价值。如果您不打算开发大型单页应用程序，使用Vuex可能会很麻烦且多余。确实如此。如果你的应用足够简单，最好不要用Vuex。

关于；在…各处；大约

作者：刘传军

创造了产品，创造了产业。好读书，求解答。你可以在1000copy#gmail.com联系我

生产

自举书https://www.gitbook.com/book/1000copy/bootstrap/details http书http://www.ituring.com.cn/book/1791 git书http://www.ituring.com.cn/book/1870

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。