上一節前端君和大家一起認識了Vuex，我們了解了Vuex是一個提供狀態管理機制，相比使用傳統的全局對象，它有兩大優點，一個是它的狀態存儲是響應式的，另一個是要不能隨意修改Vuex的狀態，必須按照它的規矩來辦事。最后也了解了它有適用和不適用的業務場景。

?

這一節，我們就來學習如何使用Vuex。

?

創建倉庫Store

要使用Vuex，我們要創建一個實例?store?，我們稱之為倉庫，利用這個倉庫?store?來對我們的狀態進行管理。

?

?//創建一個 store
?const store = new Vuex.Store({});

?

創建?store?之后，我們再來了解Vuex的幾個核心概念：

?

核心：State

上一節我們介紹過，Vuex的作用類似全局對象，沒錯，Vuex 使用單一狀態樹，用一個對象State包含了整個應用層級的所有狀態，你可以理解為這些狀態就是一堆全局變量和數據。

?

?//創建一個 store
?const store = new Vuex.Store({
??? //state存儲應用層的狀態
??? state:{
??????? count:5? //總數：5
??? }
?});

?

上面的例子中，假設我們有一個全局狀態count的值為5。那么，我們就可以將其定義為?state?對象中的key和value，作為全局狀態供我們使用。

?

?state?中的狀態被各個組件關聯著，在開發調試過程中，我們可以結合vue-devtool工具，可以清晰地看到整個應用的數據，非常方便。

?

（vue-devtool中的vuex面板）

?

但如果你使用的還是傳統的方法，定義一個全局變量來管理這些全局數據，那么就非常不合理，不但不便于調試，而且全局變量容易造成全局污染等問題。

核心：Getters

還記得Vue中的計算屬性computed嗎？當我們需要在data的基礎上再派生一些狀態的時候，就會使用computed來實現。

同樣，當我們需要從?state?中派生出一些狀態的時候，就會使用到?getters?，你可以將?getters?理解?state?的計算屬性。

?

?getters?接受?state?作為其第一個參數：

?const store = new Vuex.Store({
???//state存儲應用層的狀態
? ?state:{
? ? ??count:5? //總數：5
??? },
??? //派生出來的狀態
? ?getters:{
? ? ??//ES6 的箭頭函數語法
? ??newCount:state => state.count * 3
??? }
?});

?

假設我們要在state.count的基礎上派生出一個新的狀態newCount出來，就適合使用我們的?getters?，上面說我們使用了ES6的箭頭函數語法。

?

?//ES6 箭頭函數語法
?newCount:state => state.count * 3,

?//相當于

?//傳統語法
?newCount:function (state ) {
??? return state.count * 3;
?}

?

不熟悉的同學可以看前端君之前推出的《趣味ES6》系列教程的《第十節：ES6為函數做了哪些擴展》，里面有對箭頭函數的詳細講解。

核心：Mutations

我們上一節說了Vuex相比傳統的全局變量有兩個優勢，其中一個是Vuex中的狀態不能隨意修改，要修改必要按照Vuex提供的方式才能修改。要用Vuex，咱就得聽它的。

?

Vuex給我們提供修改倉庫?store?中的狀態的唯一辦法就是通過提交mutation。我們來看看如何定義一個mutation，它和上面的?getters?，會接受 state 作為第一個參數：

?

?const store = new Vuex.Store({
??? //state存儲應用層的狀態
??? state:{
??????? count:5? //總數：5
??? },
??? //更改store狀態的唯一途徑
??? mutations:{
??????? increment(state){
??????????? state.count ++;
??????? }
??? }
?});

我們再?mutations?中定義了一個叫increment的函數，函數體就是我們要進行更改的地方，可以看到，我們只是簡單地對?state?中的count進行了自增運算。

?

?mutations?我們是定義好了，怎么使用呢？

?

非常簡單，Vuex要求我們要想通過?mutations?更改內容，就必須提交mutation，語法如下：

?

?//提交一個名為increment的mutation
?store.commit('increment');

?

我們再提交commit 時候，字符串參數increment,就是對應在?mutations?中的increment。

?

此外，store.commit( )?還接受其他額外的參數，比如：

?

?//...
?//更改store狀態的唯一途徑
?mutations:{
??? increment(state,n){
??????? state.count += n;
??? }
?}
?//...
?store.commit('increment',10);

?

我們在提交的時候額外傳了參數10，只要在定義?mutations?的時候定義與之相對應的形參就可以處理了。

?

理解了Vuex的三個核心概念，具體怎么用呢？

別慌，下一節，前端君會用Vuex來實現一個demo案例，幫助大家更直觀的學習Vuex，敬請期待。

推薦

擴展閱讀

?原創教程：《ECMAScript 6 系列》

?原創教程：《Vue2.0基礎系列》

?附加習題：《ECMAScript 6 系列》的 2套

?附加習題：《Vue2.0基礎系列》的 1 套

關于職場

?職場感悟：混口飯吃，談不上喜歡

?薪資待遇：那么點工資，能招到人嗎？

?鄭州招聘：招聘前端3~5人

?廣州招聘：招聘前端2人

資源推薦

其實學好技術并不難，架構師免費分享全網全套最新web前端、JavaScript、HTML5、PHP、數據庫……等視頻資料！

[總價值超3萬！]年薪35萬以上的大牛幾乎都看了！

加微信:?abc15689892?免費領取，由于領取的朋友比較多，所以加微信時一定要備注：555，否則很難通過。

??

總結

以上是生活随笔為你收集整理的【vue2.0进阶】轻松理解Vuex的3个核心概念的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。