需求：后臺(tái)管理系統(tǒng)列表，帶查詢條件和分頁(yè)，點(diǎn)編輯，新頁(yè)面打開，保存之后再跳轉(zhuǎn)回之前的頁(yè)面。
（如果是表單字段少，強(qiáng)烈建議dialog修改。請(qǐng)忽略本文）
實(shí)現(xiàn)思路：
1.? store存儲(chǔ)一個(gè)map，這個(gè)map的鍵是列表頁(yè)面的url（也就是路由），值是查詢條件和分頁(yè)頁(yè)碼（根據(jù)條件自己定義）；
2.? 列表頁(yè)面初始化的時(shí)候，讀取map
3.? 列表頁(yè)面的查詢之前，存儲(chǔ)map
我個(gè)人認(rèn)為還是很方便的，優(yōu)點(diǎn)有2個(gè)：如果需要記錄列表的頁(yè)面，添加4行代碼就OK了；通用，不需要再額外定制參數(shù)
下面進(jìn)入正題：
1、store添加一個(gè)state
listPagePars:new Map(),
2、muntations添加
SAVE_LIST_PAGE_PARS: (state,{ path,pars }) => {
? ? state.listPagePars.set(path,pars);
},
3、actions添加
saveListPagePars: ({ commit },{path,pars}) => {
? ? commit('SAVE_LIST_PAGE_PARS',{ path,pars });
},
4、經(jīng)過(guò)上面3個(gè)步驟，vuex改造完畢（代碼都很少），然后是列表頁(yè)面的vue
data() {
? return{
? ? pars: {//核心的，列表頁(yè)面的統(tǒng)一參數(shù)，建議整個(gè)系統(tǒng)內(nèi)部的列表頁(yè)都統(tǒng)一這種格式
? ? ? filter: {
? ? ? ? customer_name:'',//查詢條件，有多少寫多少
? ? ? ? mobile:''
? ? ? },
? ? ? page:1,
? ? ? page_size:15,
? ? ? order_field:'customer_id', //排序字段
? ? ? order_type:'desc', //排序方式
},
……
}
5、列表查詢的時(shí)候，比如methods里面有個(gè)
getCustomers() {
? this.$store.dispatch('saveListPagePars',{path:this.$route.path,pars:this.pars});? //核心，每次查詢條件變化，都先存一次
? this.$http.get(API_URL.customer_list,{params:this.pars }).then((res) => {
? ……
});
6、列表頁(yè)面初始化
created() {
? if(this.$store.state.app.listPagePars.has(this.$route.path)) {
? ? this.pars=this.$store.state.app.listPagePars.get(this.$route.path);
? }
? this.getCustomers();
},
完畢，代碼量很少，需要注意的是列表的查詢表單，統(tǒng)一用pars這種格式規(guī)范，有個(gè)好處是，查詢的ajax也需要pars參數(shù)，比較統(tǒng)一。
