到底vuex是什么？

关于vuex类的新闻最近很多，看到眼热就去查了下资料，然后扯出来一堆flux、redux、state、state之类的概念，以及大型工程必要性之类的。看官方手册也是昏昏然。

然而，我还是弄懂了!我准备从demo出发，以同样的一个最简单的demo，演示两种情况下的代码编写情况：

单纯依赖于vue.js
依赖vue.js，也使用了vuex技术

目的是通过对比引出vuex的概念、优势和劣势。也许这是目前最接地气的vuex的介绍吧：）。所以无论如何在了解vuex之前，你必须懂得vue.js(好像废话：）。现在开始。

假设一个微小的应用，有一个标签显示数字，两个按钮分别做数字的加一和减一的操作。用户界面看起来是这样的：

使用vue的话，就是这样：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app"><p>{{count}}<button @click="inc">+</button><button @click="dec">-</button></p>
</div>
<script>
new Vue({el:'#app',data () {return {count: 0}},methods: {inc () {this.count++},dec () {this.count--}}
})
</script>

我写的代码代码可以直接拷贝到你的html内并且打开执行，你可以不费多余的劲儿，就把应用跑起来，按按按钮，看看界面上的反应是否如你预期。

整个代码结构非常清晰，代码是代码，数据是数据，这也是我一直以来非常喜欢vue.js的重要原因。代码就是放在methods数组内的两个函数inc、dec，被指令@click关联到button上。而data内返回一个属性count，此属性通过{{count}}绑定到标签p内。

现在来看看，同样的demo app，使用vuex完成的代码的样子，再一次，如下代码不是代码片段，是可以贴入到你的html文件内，并且直接使用浏览器打开运行的。

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@next"></script>
<div id="app"><p>{{count}}<button @click="inc">+</button><button @click="dec">-</button></p>
</div>
<script>const store = new Vuex.Store({state: {count: 0},mutations: {inc: state => state.count++,dec: state => state.count--}
})const app = new Vue({el: '#app',computed: {count () {return store.state.count}},methods: {inc () {store.commit('inc')},dec () {store.commit('dec')}}
})
</script>

我们先看到有哪些重要的变化：

新的代码添加了对vuex@next脚本的依赖。这是当然的，因为你需要使用vuex的技术，当然需要引用它
methods数组还是这两个方法，这和demo1是一样的；但是方法内的计算逻辑，不再是在函数内进行，而是提交给store对象！这是一个新的对象！
count数据也不再是一个data函数返回的对象的属性；而是通过计算字段来返回，并且在计算字段内的代码也不是自己算的，而是转发给store对象。再一次store对象！

就是说，之前在vue实例内做的操作和数据的计算现在都不再自己做了，而是交由对象store来做了。这突然让我想到就先餐厅现在都不在洗碗了，都交给政府认证的机构来洗了。

说回正题。store对象是Vuex.Store的实例。在store内有分为state对象和mutations对象，其中的state放置状态,mutations则是一个会引发状态改变的所有方法。正如我们看到的，目前的state对象，其中的状态就只有一个count。而mutations有两个成员，它们参数为state，在函数体内对state内的count成员做加1和减1的操作。

活还是那些活，现在引入了一个store对象，把数据更新的活给揽过去，不再需要vue实例自己计算了，代价是引入了新的概念和层次。那么好处是什么（一个土耳其古老的发问）？

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

多个组件依赖于同一状态。传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。这需要你去学习下，vue编码中多个组件之间的通讯的做法。
来自不同组件的行为需要变更同一状态。我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。

以上的这些模式非常脆弱，通常会导致无法维护的代码。来自官网的一句话：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。这里的关键在于集中式存储管理。这意味着本来需要共享状态的更新是需要组件之间通讯的，而现在有了vuex，就组件就都和store通讯了。问题就自然解决了。

这就是为什么官网再次会提到Vuex构建大型应用的价值。如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。

转载自：https://segmentfault.com/a/1190000007516967

到底vuex是什么？相关推荐

急速JavaScript全栈教程
自从一年前发布了Vuejs小书的电子书,也有些日子没有碰过它们了,现在因为项目的缘故,需要使用JavaScript全栈开发.所以,我得把这个全栈环境搭建起来. 整个系列,是会采用我的一贯风格,就是不疾 ...
vue.js学习资源大全
下面整理了一些关于Vue以及Vue衍生的学习资源: 官网教程: https://cn.vuejs.org/v2/guide/installation.html 官网API:https://cn.vue ...
Vuex白话教程第一讲：Vuex到底是个什么鬼？
Vuex白话教程第一讲:Vuex到底是个什么鬼? Vuex白话教程第二讲:Vuex旗下的State和Getter Vuex白话教程第三讲:Vuex旗下的Mutation Vuex白话教程第四讲:Vue ...
Vuex教程第一讲：Vuex到底是个什么--01
先说两句官方已经有教程了,为什么还要写这个教程呢?说实话,还真不是我闲着蛋疼,官方的教程真的是太官方了,对于刚入门 Vuex 的童鞋来说,想必看官方的教程,很多地方就如同看圣经一样,比如「欧玛尼玛尼 ...
Vuex 白话教程第一讲：Vuex 到底是个什么鬼？
转载出处:简书作者大宏说作者链接:大宏说先说两句官方已经有教程了,为什么还要写这个教程呢?说实话,还真不是我闲着蛋疼,官方的教程真的是太官方了,对于刚入门 Vuex 的童鞋来说,想必看官方的教 ...
vuex与全局变量区别_挑战全网最幽默的Vuex系列教程：第一讲 Vuex到底是什么鬼
先说两句官方已经有教程了,为什么还要写这个教程呢?说实话,还真不是我闲着蛋疼,官方的教程真的是太官方了,对于刚入门 Vuex 的童鞋来说,想必看官方的教程,很多地方就如同看圣经一样,比如「欧玛尼玛尼 ...
挑战全网最幽默的Vuex系列教程：第一讲 Vuex到底是什么鬼
先说两句官方已经有教程了,为什么还要写这个教程呢?说实话,还真不是我闲着蛋疼,官方的教程真的是太官方了,对于刚入门 Vuex 的童鞋来说,想必看官方的教程,很多地方就如同看圣经一样,比如「欧玛尼玛尼 ...
vuex到底是什么？什么情况下使用？
vuex到底是什么?什么情况下使用? 一.vuex是什么? vuex是vue的状态管理器,是介于客户端与服务端之间的一个桥梁. 自己大致的画了个草图辅助理解在vuex中有五个对象属性:state.m ...
Vuex到底如何使用
一.简介 1.1什么是Vuex 官方的定义如下: Vuex是一个专为Vue.js应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件状态,并以相应的规则保证状态以一种可预测的方式发生改变. ...

到底vuex是什么？

到底vuex是什么？相关推荐

最新文章

热门文章