關于vuex類的新聞最近很多，看到眼熱就去查了下資料，然后扯出來一堆flux、redux、state、state之類的概念，以及大型工程必要性之類的?？垂俜绞謨砸彩腔杌枞?。

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

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

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

假設一個微小的應用，有一個標簽顯示數字，兩個按鈕分別做數字的加一和減一的操作。用戶界面看起來是這樣的：

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

整個代碼結構非常清晰，代碼是代碼，數據是數據，這也是我一直以來非常喜歡vue.js的重要原因。代碼就是放在methods數組內的兩個函數inc、dec，被指令@click關聯(lián)到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函數返回的對象的屬性；而是通過計算字段來返回，并且在計算字段內的代碼也不是自己算的，而是轉發(fā)給store對象。再一次store對象！

就是說，之前在vue實例內做的操作和數據的計算現在都不再自己做了，而是交由對象store來做了。這突然讓我想到就先餐廳現在都不在洗碗了，都交給認證的機構來洗了。

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

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

vuex解決了組件之間共享同一狀態(tài)的麻煩問題。當我們的應用遇到多個組件共享狀態(tài)時，會需要：

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

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

這就是為什么官網再次會提到Vuex構建大型應用的價值。如果您不打算開發(fā)大型單頁應用，使用 Vuex 可能是繁瑣冗余的。確實是如此——如果您的應用夠簡單，您最好不要使用 Vuex。

關于

作者：劉傳君

創(chuàng)建過產品，創(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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論