關(guān)于vuex類的新聞最近很多，看到眼熱就去查了下資料，然后扯出來一堆flux、redux、state、state之類的概念，以及大型工程必要性之類的?？垂俜绞謨?cè)也是昏昏然。

然而，我還是弄懂了!我準(zhǔn)備從demo出發(fā)，以同樣的一個(gè)最簡(jiǎn)單的demo，演示兩種情況下的代碼編寫情況：

• 單純依賴于vue.js
• 依賴vue.js，也使用了vuex技術(shù)

目的是通過對(duì)比引出vuex的概念、優(yōu)勢(shì)和劣勢(shì)。也許這是目前最接地氣的vuex的介紹吧：）。所以無論如何在了解vuex之前，你必須懂得vue.js(好像廢話：）?，F(xiàn)在開始。

假設(shè)一個(gè)微小的應(yīng)用，有一個(gè)標(biāo)簽顯示數(shù)字，兩個(gè)按鈕分別做數(shù)字的加一和減一的操作。用戶界面看起來是這樣的：

使用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內(nèi)并且打開執(zhí)行，你可以不費(fèi)多余的勁兒，就把應(yīng)用跑起來，按按按鈕，看看界面上的反應(yīng)是否如你預(yù)期。

整個(gè)代碼結(jié)構(gòu)非常清晰，代碼是代碼，數(shù)據(jù)是數(shù)據(jù)，這也是我一直以來非常喜歡vue.js的重要原因。代碼就是放在methods數(shù)組內(nèi)的兩個(gè)函數(shù)inc、dec，被指令@click關(guān)聯(lián)到button上。而data內(nèi)返回一個(gè)屬性count，此屬性通過{{count}}綁定到標(biāo)簽p內(nèi)。

現(xiàn)在來看看，同樣的demo app，使用vuex完成的代碼的樣子，再一次，如下代碼不是代碼片段，是可以貼入到你的html文件內(nèi)，并且直接使用瀏覽器打開運(yùn)行的。

<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>

我們先看到有哪些重要的變化：

• 新的代碼添加了對(duì)vuex@next腳本的依賴。這是當(dāng)然的，因?yàn)槟阈枰褂胿uex的技術(shù)，當(dāng)然需要引用它
• methods數(shù)組還是這兩個(gè)方法，這和demo1是一樣的；但是方法內(nèi)的計(jì)算邏輯，不再是在函數(shù)內(nèi)進(jìn)行，而是提交給store對(duì)象！這是一個(gè)新的對(duì)象！
• count數(shù)據(jù)也不再是一個(gè)data函數(shù)返回的對(duì)象的屬性；而是通過計(jì)算字段來返回，并且在計(jì)算字段內(nèi)的代碼也不是自己算的，而是轉(zhuǎn)發(fā)給store對(duì)象。再一次store對(duì)象！

就是說，之前在vue實(shí)例內(nèi)做的操作和數(shù)據(jù)的計(jì)算現(xiàn)在都不再自己做了，而是交由對(duì)象store來做了。這突然讓我想到就先餐廳現(xiàn)在都不在洗碗了，都交給認(rèn)證的機(jī)構(gòu)來洗了。

說回正題。store對(duì)象是Vuex.Store的實(shí)例。在store內(nèi)有分為state對(duì)象和mutations對(duì)象，其中的state放置狀態(tài),mutations則是一個(gè)會(huì)引發(fā)狀態(tài)改變的所有方法。正如我們看到的，目前的state對(duì)象，其中的狀態(tài)就只有一個(gè)count。而mutations有兩個(gè)成員，它們參數(shù)為state，在函數(shù)體內(nèi)對(duì)state內(nèi)的count成員做加1和減1的操作。

活還是那些活，現(xiàn)在引入了一個(gè)store對(duì)象，把數(shù)據(jù)更新的活給攬過去，不再需要vue實(shí)例自己計(jì)算了，代價(jià)是引入了新的概念和層次。那么好處是什么（一個(gè)土耳其古老的發(fā)問）？

vuex解決了組件之間共享同一狀態(tài)的麻煩問題。當(dāng)我們的應(yīng)用遇到多個(gè)組件共享狀態(tài)時(shí)，會(huì)需要：

• 多個(gè)組件依賴于同一狀態(tài)。傳參的方法對(duì)于多層嵌套的組件將會(huì)非常繁瑣，并且對(duì)于兄弟組件間的狀態(tài)傳遞無能為力。這需要你去學(xué)習(xí)下，vue編碼中多個(gè)組件之間的通訊的做法。
• 來自不同組件的行為需要變更同一狀態(tài)。我們經(jīng)常會(huì)采用父子組件直接引用或者通過事件來變更和同步狀態(tài)的多份拷貝。

以上的這些模式非常脆弱，通常會(huì)導(dǎo)致無法維護(hù)的代碼。來自官網(wǎng)的一句話：Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)。這里的關(guān)鍵在于集中式存儲(chǔ)管理。這意味著本來需要共享狀態(tài)的更新是需要組件之間通訊的，而現(xiàn)在有了vuex，就組件就都和store通訊了。問題就自然解決了。

這就是為什么官網(wǎng)再次會(huì)提到Vuex構(gòu)建大型應(yīng)用的價(jià)值。如果您不打算開發(fā)大型單頁(yè)應(yīng)用，使用 Vuex 可能是繁瑣冗余的。確實(shí)是如此——如果您的應(yīng)用夠簡(jiǎn)單，您最好不要使用 Vuex。

關(guān)于

作者：劉傳君

創(chuàng)建過產(chǎn)品，創(chuàng)過業(yè)。好讀書，求甚解。 可以通過 1000copy#gmail.com 聯(lián)系到我

出品

bootstrap小書 https://www.gitbook.com/book/1000copy/bootstrap/details
http小書 http://www.ituring.com.cn/book/1791
Git小書 http://www.ituring.com.cn/book/1870

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論