vuex簡單---->複雜---->模塊---->目錄

話很少說，開幹。

首先，使用vue-cli3建立一個項目

 

選擇最後一個

選擇本身須要的功能，安裝之

最終項目的目錄以下：

爲了使講解更簡單明瞭，咱們修改一下目錄下的一些文件，將app.vue下的文件都註釋掉，以下圖：

如今咱們開始一個最簡單的vuex應用。打開store.js文件，編輯以下 ：

 

打開App.vue文件，編輯以下：

main.js文件不須要作修改，而後啓動項目：

最終顯示結果以下：

是的，這就是最簡單的一個vuex應用了。

 

State

若是世界上任何事情都是如此簡單，那這個世界就太美好了，但是現實是殘酷的。當一個組件須要獲取多個狀態的時候，將這些狀態都聲明爲計算屬性會有些重複和冗餘。因此就有了mapState這個輔助函數，它能夠生成計算屬性，讓你偷個懶。修改store.js文件以下：

而後修改App.vue文件以下：

可是我仍是想再偷偷懶，修改App.vue文件以下 ：

怎麼樣，又少寫了不少吧，可是呢我實在懶的不行，因而再修改App.vue以下 ：

到這兒，小夥伴們應該想着夠簡單的了，不會再有比這更簡單的了，呵呵，對！你又猜到了，還有更好的寫法。另外，我也不喜歡computed對象後面跟着一個函數運算，感受好怪，我更喜歡後面直接跟着一個花括號{}，保持原有的展現風格，內心很舒爽。

mapState函數返回的是一個對象。如何將它與局部計算屬性混合使用呢？一般，咱們須要使用一個工具函數將多個對象合併爲一個，以使咱們能夠將最終對象傳給 computed 屬性，自從有了對象展開運算符，能夠極大的簡化寫法，修改App.vue文件以下：

好了，到了這裏，關於state應該是現有最終極的用法了。可是，僅僅擁有state是不夠的，有些時候須要從state中派生出一些狀態，對數據進行過濾並計算。這個時候，getter出現了。

 

Getter

Vuex容許在store中定義'getter'（能夠認爲是store的計算屬性），這段紅字必定要記住方便咱們理解。

Getter接受state做爲第一個參數：修改store.js文件以下：

修改App.vue文件以下：

最終頁面展現以下：

Getter也能夠接受其餘的getter做爲第二個參數，修改store.js以下：

修改App.vue文件以下：

頁面展現：

能夠經過讓getter返回一個函數，來實現給getter參數。修改store.js以下：

修改App.vue以下：

 

展現以下：

getter固然也有它的輔助函數 mapGetters，若是對mapState輔助函數已經瞭解的話，這裏應該不是問題。

 

Mutation

只有state是不夠的，咱們還須要操做它，state纔會有意義。在vuex中更改store狀態的惟一方法就是提交mutation。咱們不能直接調用mutation，它接受state做爲第一個參數。修改store.js文件以下 ：

修改App.vue文件以下：

點擊【add age】按鈕，年齡(age)就會每次加1的方式往上累加。

 可是可不是每次都是以1的量往上加，或者是其餘不一樣的類型或數據，因此，mutation的第二個參數就是額外須要傳入的參數（官網上叫載荷payload，感受實在是沒那麼白話），修改store.js以下：

修改App.vue文件以下：

如今，年齡（age）就以每次10的量往上累加了。通常狀況下，參數（載荷payload）以一個對象的方式傳入。咱們就來試試，以對象風格的方式提交（包含type屬性的對象），修改 store.js 和 App.vue文件以下：

官網上說，可使用常量的方式替代Mutatioin事件類型，用不用常量取決於使用者，我好像還沒習慣這麼用，暫時略過吧。值得注意的是（也是很是重要的）：Mutation必須是同步函數。

 好了，到了這兒小夥伴們必定會問，這個mutation是否是和state，getter同樣，也有輔助函數呢？對極了，mapMutations輔助函數能夠將組件中的methods映射爲store.commit調用，使用方法也和mapState、mapGetters差很少，偷賴咱們從沒放棄過！修改store.js 和 App.vue文件以下：

有些時候，咱們會但願在事件調用上的名稱和mutation中的函數名稱有些區別，那麼給它個別稱吧，以下：

關於Mutation基本到這兒就結束了，小夥伴還記得前面標紅的字嗎？mutation必須是同步的，那麼若是我想異步操做呢？因此爲了處理異步操做，Action登場。

 

Action

 Action相似於mutation，不一樣是的：

一、Action 提交的是 mutation，不直接變動狀態

二、Action能夠包含任意異步操做

繼續咱們上面的例子，修改store.js文件以下：

修改App.vue文件以下：

咱們能夠看到，改變的地方並很少。

Action函數接受一個context對象參數，它與store實例具備相同方法和屬性，可是context絕對不是store實例自己。

 爲了讓代碼更優雅，會常用 ES6 的參數解構，修改store.js以下：

是否是精簡了許多，可讀性更強了。

前面說過，Action和Mutation相似，因此Action一樣支持載荷和對象方式分發，修改以下：

 以載荷形式分發：

 以對象形式分發：

 

如今，是時候來個異步了，瞧瞧Action真正的魅力，修改以下：

 一樣的，Action也有輔助函數mapActions，將組件的methods映射爲store.dispatch調用。而且給個別名，以下：

最後，store.dispatch是能夠處理Promise的，而且store.dispatch仍舊會返回Promise。以下：

 

 

 Module

 爲了適應大型項目，狀態集中到一個對象中會變得很是複雜，難以管理，因此store能夠分割成模塊（module），每一個模塊有本身的 state、mutation、action、getter。

在上例中咱們做一些修改，把name和age分別分割成兩個模塊name和age，並把相應的 state、mutation、action、getter寫進每一個局部模塊裏面，注意局部與全局寫法的不一樣區別。以下：

同時，刪除原來export default {}中的內容，添加modules屬性，並將兩個模塊加載進去，以下：

修改App.vue文件，在這個文件中其實修改的也很少，只是添加了各自的命名空間，以下 ：

到了這兒，是否是應該已經大功告成了呢，顯示尚未，關於Modules的更多應用，這裏再也不講解，請穩步官網。

 

目錄結構

而接下來咱們要討論的就是目錄結構了，雖然咱們將store.js已經劃分了模塊，可是它仍是在一個文件當中，若是應用很龐大，模塊數量不少，都寫在store.js中明顯是不合適的，也不方便管理，那麼應該如何構建目錄，以下：

先建立一個文件夾，命名爲 stores，在stores文件夾裏建立一個Index.js，用於存放基礎框架佈局，以下：

而後建立兩個模塊的文件夾 moduleName 和 moduleAge ，在每一個文件夾裏分別建立4個JS文件，index.js、getters.js、mutations.js、actions.js

moduleName/index.js

smoduleName/getters.js

smoduleName/mutations.js

smoduleName/actions.js

 

smoduleAge/index.js

smoduleName/getters.js

smoduleName/mutations.js

smoduleName/actions.js

之後就能夠按照這個目錄結構 及 構建方式 建立項目了。好了，大功告成！