在vue-cli2項目中安裝vuex，並使用NPM安裝vuex-save。
安裝成功後，在src目錄下創建壹個新的store文件，並在其中創建壹個js文件。
在js文件中寫入:
然後將商店引入main.js文件，並在vue實例中註冊。
vuex的文件配置在這裏完成。
現在回到存儲文件中的參數。這些對象是vuex的五個核心:
狀態:全局可訪問的對象。
Getter:和vue的computed壹樣，用來實時監控狀態值(最新狀態)的變化。
突變:存儲改變狀態值的方法(同步)
動作:在突變中觸發方法(異步)
模塊:模塊
狀態是存儲在Vuex中的數據對象，就像Vue實例中的數據壹樣。只有狀態可以全局訪問。
定義stata對象，在state中直接定義key:val，可以定義任何數據類型。
用這個。$store.state獲取頁面中state的值。
在這裏，狀態通常安裝在計算的計算屬性上，這樣當狀態的值發生變化時，它可以及時做出響應。
當然也可以用手表來聽。
狀態中的輔助功能mapState
當壹個組件需要獲得多個狀態時，將所有這些狀態聲明為計算屬性會有些重復和多余。為了解決這個問題，我們可以使用mapState輔助函數來幫助我們生成計算屬性。
輸出
Vuex允許我們在存儲中定義getter(可以認為是存儲的計算屬性)。就像計算屬性computed壹樣，getter的返回值是根據其依賴關系進行緩存的，只有當其依賴關系值(state中的屬性)發生變化時才會重新計算。
Getter的作用是實時監控狀態值的變化。
定義Geters對象
使用state作為其第壹個參數。
您可以使用其他getter函數作為第二個參數。
在頁面中使用getters並使用這個。$store.getters
Getters中的輔助函數mapGetters
mapGetters輔助函數只是將存儲中的getter映射到本地計算屬性:
輸出
改變Vuex的商店中的狀態的唯壹方法是提交突變。
使用state作為第壹個參數。
用這個。$store.commit ('method name ')在突變中觸發方法。
輸出
第二個參數的官方解釋稱為提交的有效載荷。
您可以向store.commit傳遞壹個額外的參數，即變異的有效負載
簡單地說，您可以在第二個參數中傳遞附加參數。
這裏以姓名為例。
輸出
在Vuex中，突變必須是同步函數。
動作可以包含任何異步操作，動作的作用就是異步觸發突變。
定義壹個操作對象
接收上下文參數和要改變的參數。
Context與store實例具有相同的方法和屬性，因此它可以執行context.commit(" ")，或者使用context.state和context.getters來獲取狀態和getters。
用這個。$store.dispatch("方法名")方法來執行操作。
輸出
類似地，Action也支持load方法，傳入第二個參數。
輸出
模塊的作用是把商店分成模塊，每個模塊都有自己的狀態、變異、動作、getter，甚至嵌套的子模塊——從上到下的劃分方式是壹樣的:
主要解決由於使用單個狀態樹，應用程序的所有狀態都會集中在壹個比較大的對象中的問題。當應用程序變得非常復雜時，store對象可能會變得非常臃腫。
簡單來說，vuex可以模塊化。