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

当我们在页面查询数据后，跳转到另一个页面，返回时查询条件还在怎么？

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

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

  state: {
    rateSettingQuery: {   // 需要缓存的查询条件
      name: "",
      startTime: "",
      endTime: "",
      type: "",
      page:"",
    },
  }

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

  mutations: {
    save_StorageQueryCriteria(state, value) {       // 页面在跳转时会把条件传过来
      state.rateSettingQuery.name = value.name
      state.rateSettingQuery.startTime = value.startTime
      state.rateSettingQuery.endTime = value.endTime
      state.rateSettingQuery.type = value.type
      state.rateSettingQuery.page = value.page
    },
  }

这样我们再vuex的准备工作就弄好了。

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

页面路由跳转示例：

   particulars(obj){
      let newObj = {     // 需要缓存的参数用一个对象包起来
       name:this.insuranceCompanyName,startTime:this.startTime,
       endTime:this.startEndTime,type:this.rateType,page:this.page1
      }
      // save_StorageQueryCriteria 这个方法就是mutations里的函数
      this.$store.commit("save_StorageQueryCriteria",newObj) 
      this.$router.push({
        name:"newRateSetting",
        query:{
          status:"1", // 详情
          id:obj.id,
        }
      })
    }

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

   // 回显查询条件
    queryConditionsDisplayed(){
      let obj = this.$store.state.user.rateSettingQuery  // 把vueX里的数据取出来
      this.insuranceCompanyName = obj.name
      this.startTime = obj.startTime
      this.startEndTime = obj.endTime
      this.rateType = obj.type
      this.page1 = obj.page
      this.getListData()  // 这个是获取页面list的方法，查询条件有了之后在获取一下数据
    },

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