关于vuex类的新闻报道前段时间许多，看见breuil就去查了下数据资料，接着扯出来一大堆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
点击“”，看更多
精选文章
↓↓↓
