Vuex 進(jìn)階——模塊化組織 Vuex
前兩篇講解了一下 Vuex 的基本使用方法，可是在實(shí)際項(xiàng)目中那么寫(xiě)肯定是不合理的甸箱，如果組件太多蘸拔，不可能把所有組件的數(shù)據(jù)都放到一個(gè)?store.js?中的，所以就需要模塊化的組織 Vuex添忘，首先看一下?項(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)建文件目錄
三、編寫(xiě)文件
我們就延用上兩篇文章中的例子屋讶。先說(shuō)一個(gè)各個(gè)文件的作用
types.js內(nèi)定義常量冰寻，使用常量替代 mutation 事件類型
user.js內(nèi)寫(xiě)該user組件內(nèi)用到的state、getters皿渗、actions和mutations斩芭，并最后統(tǒng)一導(dǎo)出（類似上個(gè)例子中的 store.js ）
getters.js內(nèi)寫(xiě)原來(lái)的getters，用來(lái)獲取屬性
actions.js內(nèi)寫(xiě)原來(lái)的actions乐疆，就是要執(zhí)行的動(dòng)作划乖，如流程的判斷、異步請(qǐng)求
index.js是用來(lái)組裝 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)全部大寫(xiě)
注意：把這些常量放在單獨(dú)的文件中可以讓你的代碼合作者對(duì)整個(gè) app 包含的 mutation 一目了然迷殿。用不用常量取決于你——在需要多人協(xié)作的大型項(xiàng)目中，這會(huì)很有幫助咖杂。但如果你不喜歡庆寺，你完全可以不這樣做。
3.?user.js?內(nèi)寫(xiě)該?user?組件內(nèi)用到的?state?诉字、?getters?止邮、?actions?和?mutations
注意：上方?mutations?中的?[types.INCREMENT]?寫(xiě)法，因?yàn)?types.INCREMENT?是一個(gè)對(duì)象奏窑，所以不能直接當(dāng)做一個(gè)函數(shù)名來(lái)寫(xiě)，需要用到 ES2015 風(fēng)格的計(jì)算屬性命名功能來(lái)使用一個(gè)常量作為函數(shù)名屈扎，方能正常使用埃唯，原來(lái)的寫(xiě)法為：
constmutations ={
?????????????????increment(state){?
?????????????????????????????state.count ++;?
?????????}
}
4.?getters.js?內(nèi)寫(xiě)原來(lái)的判斷奇偶數(shù)方法
5.?actions.js?內(nèi)寫(xiě)原來(lái)的異步操作
6. 在?index.js?中組裝 actions.js 、 getters.js 鹰晨、user.js 的墨叛，然后統(tǒng)一導(dǎo)出
7.?Vue.app?文件不作任何修改
