vue作後臺管理系統，記住列表的查詢條件和分頁

需求：後臺管理系統列表，帶查詢條件和分頁，點編輯，新頁面打開，保存以後再跳轉回以前的頁面。
（若是是表單字段少，強烈建議dialog修改。請忽略本文）

實現思路：

1. store存儲一個map，這個map的鍵是列表頁面的path（也就是路由），值是查詢條件和分頁頁碼（等等根據條件本身定義）；
2. 列表頁面created()的時候，讀取sotre的map
3. 列表頁面的數據查詢以前（也就是條件變化的時候），存儲到store的map

我我的認爲仍是很方便的，優勢有2個：一是若是須要記錄列表的頁面，添加4行代碼就OK了；二是通用，不須要再額外定製參數

下面進入正題：

一、 store添加一個state

listPagePars:new Map(),

二、muntations添加

SAVE_LIST_PAGE_PARS: (state,{ path,pars }) => {
    state.listPagePars.set(path,pars);
},

三、 actions添加

saveListPagePars: ({ commit },{path,pars}) => {
    commit('SAVE_LIST_PAGE_PARS',{ path,pars });
},

四、 通過上面3個步驟是store的部分，代碼都不多，淺顯易懂，而後是使用的地方（須要記錄查詢條件和頁碼的vue頁面才用）

data() {
  return{
    pars: {//核心的，列表頁面的統一參數，建議整個後臺管理系統的列表頁都統一這種格式
      filter: {
        customer_name:'',//查詢條件，有多少寫多少
        mobile:''
      },
      page:1,
      page_size:15,
      order_field:'customer_id', //排序字段
      order_type:'desc', //排序方式
},

// ……

}

五、 列表查詢的時候，如methods裏面有個

getCustomers() {
  this.$store.dispatch('saveListPagePars',{path:this.$route.path,pars:this.pars});  //核心，每次查詢條件變化，都先存一次
  // 後面是本身的ajax查詢方法，
  // this.$http.get(API_URL.customer_list,{params:this.pars }).then((res) => {
  // ……
  // });

六、 列表頁面初始化
說明：若是store存儲了當前path的參數，就用該path的參數覆蓋當前頁面的默認參數，再查詢

created() {
  if(this.$store.state.listPagePars.has(this.$route.path)) {
    this.pars=this.$store.state.listPagePars.get(this.$route.path);
  }
  this.getCustomers();
},

完畢，代碼量不多，須要注意的是列表的查詢表單，統一用你定義好的pars這種格式，有個好處是，查詢的ajax也須要pars參數，比較統一。