Vuex 進(jìn)階——模塊化組織 Vuex

前兩篇講解了一下 Vuex 的基本使用方法，可是在實(shí)際項(xiàng)目中那么寫肯定是不合理的，如果組件太多，不可能把所有組件的數(shù)據(jù)都放到一個(gè)?store.js?中的，所以就需要模塊化的組織 Vuex，首先看一下?項(xiàng)目結(jié)構(gòu)。

項(xiàng)目結(jié)構(gòu)

一、首先執(zhí)行以下命令：

vue init webpack-simple vuex-demo

cd vuex-demo

npm install

npm install vuex -S

npm run dev

二、按照上圖結(jié)構(gòu)創(chuàng)建文件目錄

Vuex 模塊化目錄

三、編寫文件

我們就延用上兩篇文章中的例子。先說一個(gè)各個(gè)文件的作用

types.js內(nèi)定義常量，使用常量替代 mutation 事件類型

user.js內(nèi)寫該user組件內(nèi)用到的state、getters、actions和mutations，并最后統(tǒng)一導(dǎo)出（類似上個(gè)例子中的 store.js ）

getters.js內(nèi)寫原來的getters，用來獲取屬性

actions.js內(nèi)寫原來的actions，就是要執(zhí)行的動(dòng)作，如流程的判斷、異步請(qǐng)求

index.js是用來組裝 actions.js 、 getters.js 、user.js 的，然后進(jìn)行統(tǒng)一的導(dǎo)出

1. 在?main.js?中導(dǎo)入?index.js?文件并注冊(cè)

2. 在?types.js?內(nèi)定義?常量?并導(dǎo)出，默認(rèn)全部大寫

注意：把這些常量放在單獨(dú)的文件中可以讓你的代碼合作者對(duì)整個(gè) app 包含的 mutation 一目了然。用不用常量取決于你——在需要多人協(xié)作的大型項(xiàng)目中，這會(huì)很有幫助。但如果你不喜歡，你完全可以不這樣做。

3.?user.js?內(nèi)寫該?user?組件內(nèi)用到的?state?、?getters?、?actions?和?mutations

注意：上方?mutations?中的?[types.INCREMENT]?寫法，因?yàn)?types.INCREMENT?是一個(gè)對(duì)象，所以不能直接當(dāng)做一個(gè)函數(shù)名來寫，需要用到 ES2015 風(fēng)格的計(jì)算屬性命名功能來使用一個(gè)常量作為函數(shù)名，方能正常使用，原來的寫法為：

constmutations ={

?????????????????increment(state){?

?????????????????????????????state.count ++;?

?????????}

}

4.?getters.js?內(nèi)寫原來的判斷奇偶數(shù)方法