VueX的存储与使用缓存页面查询条件

当我们在列表页面查询数据后，跳转到详情页面，返回时查询条件还在怎么处理？

第一步：在vuex里新建一个对象用来保存查询条件。

在state:{}这个对象里增加一个变量 例如：

const state = {
     rateSettingQuery: {   // 需要缓存的查询条件
	      dateType:'',
	      name:'',
	      fileName:'',
	      number:'',
	      idCard:'',
	      userId:'',
	      status:['0','11','1'],
	      createTime:'',
	      currentPages:1,
	      pageSize:10,
	      currentIndex:0,
	
    },
}

第二部：在mutations：{}里面新加一个函数用来修改state里面的值，因为vuex里是不能直接修改的。

const mutations = {
  save_StorageQueryCriteria(state, value) {       // 页面在跳转时会把条件传过来
    state.rateSettingQuery.dateType = value.dateType
    state.rateSettingQuery.name = value.name
    state.rateSettingQuery.fileName = value.fileName
    state.rateSettingQuery.number = value.number
    state.rateSettingQuery.idCard = value.idCard
    state.rateSettingQuery.userId = value.userId
    state.rateSettingQuery.status = value.status
    state.rateSettingQuery.createTime = value.createTime
    state.rateSettingQuery.currentPages = value.currentPages
    state.rateSettingQuery.pageSize = value.pageSize
    state.rateSettingQuery.currentIndex = value.currentIndex
    state.rateSettingQuery.activeName = value.activeName
  },
}

以上2步vuex的准备工作就弄好了。

我们在页面跳转时只需把参数传过来就好了。
页面路由跳转示例：

viewfileCont(id){
      let newObj = {     // 需要缓存的参数用一个对象包起来
        dateType:this.waitsignForm.dateType,
        name:this.waitsignForm.name,
        fileName:this.waitsignForm.fileName,
        number:this.waitsignForm.number,
        idCard:this.waitsignForm.idCard,
        userId:this.userIds,
        status:this.signStatus,
        createTime:this.waitsignForm.createTime,
        currentPages:this.currentPage,
        pageSize:this.pageSize,
        currentIndex:this.currentIndex
      }
      // save_StorageQueryCriteria 这个方法就是mutations里的函数
      this.$store.commit("save_StorageQueryCriteria",newObj)

      this.$router.push({
        path: '/viewfiles', query: {
          id: id
        }
      })
    },

最后在新建一个函数用来回显数据

// 回显查询条件
    queryConditionsDisplayed(){
      let obj = this.$store.state.rateSettingQuery  // 把vueX里的数据取出来
      this.waitsignForm.dateType = obj.dateType
      this.waitsignForm.name = obj.name
      this.waitsignForm.fileName = obj.fileName
      this.waitsignForm.number = obj.number
      this.waitsignForm.idCard = obj.idCard
      this.waitsignForm.createTime = obj.createTime
      this.userIds = obj.userIds
      this.signStatus = obj.status
      this.currentPage=obj.currentPages;
      this.pageSize=obj.pageSize;
      this.currentIndex=obj.currentIndex;
      this.getListData();
    },

最后页面就能看到回显的数据了。