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参数，比较统一。