[TOC] ------- ## Vuex起步 每一個 Vuex 應用的核心就是 store（倉庫）。 "store" 基本上就是一個容器，它包含著你的應用中大部分的狀態(state)。 Vuex 和單純的全局對象有以下兩點不同： - Vuex 的狀態存儲是響應式的。 當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那么相應的組件也會相應地得到高效更新。 - 你不能直接改變 store 中的狀態。 改變 store 中的狀態的唯一途徑就是顯式地提交(commit) mutations。 這樣使得我們可以方便地跟蹤每一個狀態的變化，從而讓我們能夠實現一些工具幫助我們更好地了解我們的應用。 ### 最簡單的 Store 假設一個微小的應用，有一個標簽顯示數字，兩個按鈕分別做數字的加一和減一的操作。用戶界面看起來是這樣的：  使用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> ~~~ >[success]預覽： 整個代碼結構非常清晰，代碼是代碼，數據是數據。代碼就是放在methods數組內的兩個函數inc、dec，被指令@click關聯到button上。而data內返回一個屬性count，此屬性通過{{count}}綁定到標簽p內。 現在來看看，同樣的demo app，使用vuex完成的代碼的樣子 安裝 Vuex 之后，讓我們來創建一個 store。創建過程直截了當——僅需要提供一個初始 state 對象和一些 mutations： ~~~ <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vuex@2.0.0"></script> <div id="app"> <p>{{count}} <button @click="inc">+</button> <button @click="dec">-</button> </p> </div> <script> // 如果在模塊化構建系統中，請確保在開頭調用了 Vue.use(Vuex) 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> ~~~ >[success]預覽： 我們先看到有哪些重要的變化： - 新的代碼添加了對vuex腳本的依賴。這是當然的，因為你需要使用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的操作。 再次強調，我們通過提交 mutation 的方式，而非直接改變 store.state.count，是因為我們想要更明確地追蹤到狀態的變化。這個簡單的約定能夠讓你的意圖更加明顯，這樣你在閱讀代碼的時候能更容易地解讀應用內部的狀態改變。此外，這樣也讓我們有機會去實現一些能記錄每次狀態改變，保存狀態快照的調試工具。有了它，我們甚至可以實現如時間穿梭般的調試體驗。 由于 store 中的狀態是響應式的，在組件中調用 store 中的狀態簡單到僅需要在計算屬性中返回即可。觸發變化也僅僅是在組件的 methods 中提交 mutations。