Vue做后台管理系统，记住列表的查询条件和分页

在store下新建一个文件cache.js，输入一下内容

const state = {
  listPagePars: new Map()
}

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

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

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

在getters.js全局注册

listPagePars: state => state.cache.listPagePars

需要记录查询条件和页码的vue页面：

import { mapState } from 'vuex'

data() {
   return {
      pars: { // 查询条件
         title: '',
         startTime: '',
         status: '',
         page: 1,
         pageSize: 10
      },
   }
}

computed: {
  ...mapState({
    listPagePars: state => state.cache.listPagePars
  })
},
created() {
  // console.log(this.listPagePars)
  if (this.listPagePars.has(this.$route.path)) {
    this.pars = this.listPagePars.get(this.$route.path)
  }
  this.getList()
  this.getOrg()
}