需求：后臺管理系統(tǒng)列表恬砂，帶查詢條件和分頁，點編輯蓬痒，新頁面打開泻骤，保存之后再跳轉(zhuǎn)回之前的頁面。
（如果是表單字段少梧奢，強烈建議dialog修改狱掂。請忽略本文）
實現(xiàn)思路：
1.? store存儲一個map，這個map的鍵是列表頁面的url（也就是路由）亲轨，值是查詢條件和分頁頁碼（根據(jù)條件自己定義）趋惨；
2.? 列表頁面初始化的時候，讀取map
3.? 列表頁面的查詢之前惦蚊，存儲map
我個人認為還是很方便的器虾，優(yōu)點有2個：如果需要記錄列表的頁面，添加4行代碼就OK了蹦锋；通用兆沙，不需要再額外定制參數(shù)
下面進入正題：
1、store添加一個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)過上面3個步驟憎妙，vuex改造完畢（代碼都很少）库正，然后是列表頁面的vue
data() {
? return{
? ? pars: {//核心的，列表頁面的統(tǒng)一參數(shù)厘唾，建議整個系統(tǒng)內(nèi)部的列表頁都統(tǒng)一這種格式
? ? ? filter: {
? ? ? ? customer_name:'',//查詢條件褥符，有多少寫多少
? ? ? ? mobile:''
? ? ? },
? ? ? page:1,
? ? ? page_size:15,
? ? ? order_field:'customer_id', //排序字段
? ? ? order_type:'desc', //排序方式
},
……
}
5、列表查詢的時候抚垃，比如methods里面有個
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讯柔、列表頁面初始化
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ī)范粗截，有個好處是，查詢的ajax也需要pars參數(shù)捣炬，比較統(tǒng)一熊昌。
