vue 详情页返回列表页保存查询条件

终于也是闲下来了，来记录一下这段时间有趣的需求

实现思路利用store保存查询条件

1. 点击操作按钮时保存查询条件到vuex中，formData是需要保存的查询条件。这里加setTimeout是因为发现beforeDestroy离开页面之前会清除查询条件所以加了一个宏任务

// -------------------------  查询事件 --------------------------- //
  saveFormData() {
          
   
      setTimeout(() => {
          
   
        this.$nextTick(() => {
          
   
          this.$store.dispatch("setinspectSchema", this.formData);
        })
      }, 200);
    },

2. vuex 中处理

// 方案
	// actions
  setinspectSchema({
          
    commit }, data) {
          
   
    commit(SETINSPECTSCJEMA, data)
  },
  // mutations中
    // 方案
  SETINSPECTSCJEMA: (state, data) => {
          
   
    state.inspectSchema = data
  },

3. 在created中查询是否有存贮，如果有则取出查询条件调用没有则正常查询

// 获取数据
    const schema = this.$store.state.inspection.inspectSchema
    if (this._.isEmpty(schema)) {
          
   
      this.getList({
          
   });
    } else {
          
   
      // Object.assign(this.formData, schema)
      this.formData = schema
      this.getList(schema)
    }

4. 离开页面之前记得清除vuex中的查询条件

beforeDestroy() {
          
   
    this.$store.dispatch("setinspectSchema", {
          
   });
  },