關於vuex類的新聞最近很多，看到眼熱就去查了下資料，然後扯出來一堆flux、redux、state、state之類的概念，以及大型工程必要性之類的。看官方手冊也是昏昏然。
然而，我還是弄懂了!我準備從demo出發，以同樣的一個最簡單的demo，演示兩種情況下的程式碼編寫情況：
- 單純依賴於vue.js
- 依賴vue.js，也使用了vuex技術
目的是通過對比引出vuex的概念、優勢和劣勢。也許這是目前最接地氣的vuex的介紹吧：）。所以無論如何在瞭解vuex之前，你必須懂得vue.js(好像廢話：）。現在開始。
假設一個微小的應用，有一個標籤顯示數字，兩個按鈕分別做數字的加一和減一的操作。使用者介面看起來是這樣的：
使用vue的話，就是這樣：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<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檔案內，並且直接使用瀏覽器開啟執行的。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<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。