vue2页面切换刷新回来后保留搜索条件数据

最近遇到这样一个需求当我们用户在列表中通过搜索条件查询出来的list然后点击进入详情页后返回list页面要求保留上次查询条件的数据，不重置数据，当时我就想当到了使用vuex来存储用户的查询条件数据，然后进行回显处理。

vuex

新建一个vuex配置，可以用来多个页面的查询条件存储，不仅仅局限存储一个页面的查询条件

src>store>modules>sotreQueryParams.js

/*
 * @用来存储各页面的查询参数，达到用户跳转详情页返回列表查询参数不变
 */
const state = {
  auditQuery: {}, //业务配置页面查询参数
  auditTypeQuery: {} //流程配置页面查询参数
}

const mutations = {
  AUDIT_QUERY: (state, data) => {
    state.auditQuery = data
  },
  AUDIT_TYPE_QUERY: (state, data) => {
    state.auditTypeQuery = data
  },
}

const actions = {
  addAudtQuery({ commit }, data) {
    commit('AUDIT_QUERY', data)
  },
  addAudtTypeQuery({ commit }, data) {
    commit('AUDIT_TYPE_QUERY', data)
  },
}

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

业务页面代码

1.流程配置页面代码 在created中先判断vuex里面有没有该页面的查询条件数据，有则赋值查询，没有则为空

2.在getList查询列表逻辑中，每次查询的时候我去向vuex里面存储我最新的查询条件数据

 created() {
    //查询用户之前是否已保存查询参数，如果有则回显
    if (
      Object.keys(this.$store.state.sotreQueryParams.auditQuery).length === 0
    ) {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        auditType: undefined,
        baseTable: undefined,
        baseKey: undefined,
        baseName: undefined,
        baseService: undefined,
      };
    } else {
      this.queryParams = JSON.parse(
        JSON.stringify(this.$store.state.sotreQueryParams.auditQuery)
      );
    }
    this.getList();
  },
  methods:{
 /** 查询流程业务配置列表 */
    getList() {
      this.loading = true;
      //存储页面的查询参数，达到用户跳转详情页返回列表查询参数不变
      this.$store.dispatch("sotreQueryParams/addAudtQuery", this.queryParams);
      listAuditType(this.queryParams).then((response) => {
        this.auditTypeList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
  }