vuejs中vuex狀態(tài)管理模式的示例分析

這篇文章給大家分享的是有關(guān)vuejs中vuex狀態(tài)管理模式的示例分析的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

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

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

• 單純依賴于vue.js

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

目的是通過對比引出vuex的概念、優(yōu)勢和劣勢。也許這是目前最接地氣的vuex的介紹吧：）。所以無論如何在了解vuex之前，你必須懂得vue.js(好像廢話：）。現(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>

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

• 新的代碼添加了對vuex@next腳本的依賴。這是當(dāng)然的，因?yàn)槟阈枰褂胿uex的技術(shù)，當(dāng)然需要引用它

• methods數(shù)組還是這兩個(gè)方法，這和demo1是一樣的；但是方法內(nèi)的計(jì)算邏輯，不再是在函數(shù)內(nèi)進(jìn)行，而是提交給store對象！這是一個(gè)新的對象！

• count數(shù)據(jù)也不再是一個(gè)data函數(shù)返回的對象的屬性；而是通過計(jì)算字段來返回，并且在計(jì)算字段內(nèi)的代碼也不是自己算的，而是轉(zhuǎn)發(fā)給store對象。再一次store對象！
  

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

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

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

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

• 多個(gè)組件依賴于同一狀態(tài)。傳參的方法對于多層嵌套的組件將會(huì)非常繁瑣，并且對于兄弟組件間的狀態(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通訊了。問題就自然解決了。

感謝各位的閱讀！關(guān)于“vuejs中vuex狀態(tài)管理模式的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！