使用vuex的store的過程中，發現了一些不是很優雅的地方：
store層module太多，找state、getter、mutation、action對應的module比較慢。
元件裡面mapgetters、mapactions、mapmutations過多，分不清getter、action、mutation屬於哪個module，比較混亂。
沒有使用mutation type 和action type的列舉常量來約束action type和mutation type取值，字串方式容易出錯。（如上圖）
針對這3個問題，制定了3條重構方案。
1. module聚類分層
按照聚類分層思想，當業務複雜後，需要通過一定的聚類特徵對扁平化的結構進行分層。
這裡按照資料的用途分了page、components、domain、other這四類，page儲存頁面元件的資料，components儲存基礎元件的資料，domain儲存實體的資料，other儲存其他全域性資料。
之前的modules
之後的modules
目前還沒有儲存實體資料的module，所以暫時為空
2.module新增namespace
store劃分module是因為不同的資料有不同的歸屬。
如果想要每個module都能響應全域性action的話，不需要加namespace，但是我們並沒有沒有乙個action對應多個module的action handler的情況。反而因為沒有加namespace，導致元件裡的多個module的getter、action、mutation都扁平的堆在一起，結構混亂、不清晰。
...mapmutations([
changeisicetree: 'changeisicetree',
changeicetreestatus: 'changeicetreestatus',
showtoast: 'showtoast',
changeremainingfronzetime: 'changeremainingfronzetime',
decreaseremainingfronzetime: 'decreaseremainingfronzetime',
changeicetreefadeout: 'changeicetreefadeout',
changeicetreefadein: 'changeicetreefadein',
changefrozentimes: 'changefrozentimes',
changetreecurtime: 'changetreecurtime',
changequicktreemedal:'changequicktreemedal',
changequickhonormedal:"changequickhonormedal",
updatepopupoptionstatus: 'updatepopupoptionstatus'
}),複製**
加上namespace之後，每個mutaion屬於乙個namespace，每個namespace代表乙個module，在元件裡就可以輕鬆的根據namespace區分出哪個module來。
...mapgetters('aaaaa',[
'mutation111111',
'mutation22222',
'mutation33333'
]);...mapmutations('aaaaa',[
'mutation111111',
'mutation22222',
'mutation33333'
]);...mapmutations('bbbbb',[
'mutation4444444',
'mutation555555',
'mutation666666',
]);複製**
3.mutation type和action type使用列舉常量約束
mutation type和action type的名字可能會寫錯，因為沒有使用typescript，沒有型別約束，如果寫錯了，編譯時無法檢查出來，只能在執行時檢查。解決這個問題或者使用ts，或者全部的mutation type和action type從列舉常量中取。
store中的資料是模組化的，mutation type 和action type的列舉常量自然也是，但是vuex的module並不會處理這兩者，想把這些模組化的motation type和action type掛到store例項上，可以通過vuex外掛程式來解決。
我發現社群並沒有我需要的vuex外掛程式，於是我自己封裝了乙個
/**
* 生成檔案對應的模組
* * @param dirpath 資料夾路徑
*/const generatemodules = (files) =>
files.keys().foreach(key => )
return modules;
}/**
* 所有file
* */
const allfiles =
/** * 所有module
* */
const allmodules =
/** * 根據types獲取modules下的多個模組的結構化資料
* @param types module type
* @param fieldname 欄位名
*/const getstructureddata = (types, fieldnames) => ;
types.foreach(type =>
});structureddata[type]= structuredmoduledata && structuredmoduledata.length ? object.assign(...structuredmoduledata): {};
})return structureddata
}const enumtypeplugin = store =>
module.exports = enumtypeplugin;
複製**
import typeenumplugin from './type-enum-plugin';
new vuex.store(
modules,
plugins: [typeenumplugin]
)複製**
module.exports =
複製**
...mapactions()
...mapactions()
複製**
...mapmutations(this.$store.mutationtypes.page.aaa)
...mapactions(this.$store.actiontypes.page.aaa)
複製**
針對vuex store的module過多，元件裡無法區分出getter、action、mutation屬於哪乙個module，mutation type和action type無約束這3個問題，針對性的提出了3條解決方案：
module聚類分層，分成page、components、domain、other四個資料夾存放module；
新增namespace，元件中使用mapgetters、mapactions、mapmuatations時加上namespace區分；
module定義時匯出mutation types和action types，並通過vuex的外掛程式掛到store上，元件中使用mapmutations和mapactions不再通過字串取對應值。
vue專案中使用vuex
import vue from vue import vuex from vuex import mutations from mutations import actions from actions import getters from getters import from utils au...
專案中使用ibatis方法
通過daomanagerbuilder載入dao.xml檔案獲取daomanager物件 dao.xml 配置如下 sql map config 配置如下 匯入database.properties檔案 設定資料庫連線屬性 匯入每乙個資料庫實體檔案 檔案指定實體類和資料表對應關係 account.x...
在專案中使用ExtJS
今天extjs官網發布了extjs最新正式版4.2.1。extjs為開發者在開發富客戶的b s應用中提供豐富的ui元件，具有統一的主題，便於快速開發，提高效率。但顯然它並不適合互聯 的開發。builds 壓縮後的extjs 體積更小，更快 docs 開發文件 examples 官方演示示例 loca...