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

michaelzhouh發表於2017-11-01
Vue

需求：後臺管理系統列表，帶查詢條件和分頁，點編輯，新頁面開啟，儲存之後再跳轉回之前的頁面。
（如果是表單欄位少，強烈建議dialog修改。請忽略本文）

實現思路：

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

我個人認為還是很方便的，優點有2個：一是如果需要記錄列表的頁面，新增4行程式碼就OK了；二是通用，不需要再額外定製引數

下面進入正題：

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、 經過上面3個步驟是store的部分，程式碼都很少，淺顯易懂，然後是使用的地方（需要記錄查詢條件和頁碼的vue頁面才用）

data() {
  return{
    pars: {//核心的，列表頁面的統一引數，建議整個後臺管理系統的列表頁都統一這種格式
      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});  //核心，每次查詢條件變化，都先存一次
  // 後面是自己的ajax查詢方法，
  // this.$http.get(API_URL.customer_list,{params:this.pars }).then((res) => {
  // ……
  // });

6、 列表頁面初始化
說明：如果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引數，比較統一。

相關文章