vue:localstorage存储搜索条件以及resetFields失效问题解决

项目: vue+elementUI 后台管理项目

场景: 在列表页输入了查询条件点击搜索之后 点击其中一条数据进入到详情页,然后从浏览器的后退按钮或者菜单导航重新回到列表页的时候查询条件被置空了,要重新在输入条件进行查询 此操作比较繁琐 于是提出需求 希望在列表页进详情页 回到列表页后条件还在

思路: 利用localstorage 或者vuex 存储搜索条件 我选择了localstorage

//在utils文件夹中准备了一个storage.js 专门用来处理localstorage
export default {
  set(key, value) {
    localStorage.setItem(key, JSON.stringify(value))
  },
  get(key) {
    return JSON.parse(localStorage.getItem(key))
  },
  remove(key) {
    localStorage.removeItem(key)
  }
}
//列表组件
import storage from '@/utils/storage'
 created() {
    if (storage.get('carOrderCenter')) {  //如果localStorage内存储了当前列表的搜索条件 就赋值
      this.searchForm = storage.get('carOrderCenter')
    }
    this.getOrderList()
  },
 //获取列表的函数
    async getOrderList() {
      try {
        const params = { ...this.searchForm }
        //及时存储变化了的搜索条件
        storage.set('carOrderCenter', this.searchForm)
        const {
          data: { code, data }
        } = await carOrderApi.getOrderList(params)
        if (code === 200) {
          this.tableData = data.list
          this.total = data.total
        }
      } catch (error) {
        console.log(error)
      } finally {
        this.tableLoading = false
      }
    },
// 重置按钮
onReset() {
      this.$refs['searchForm'].resetFields()
      this.searchForm.pageNum = 1
      this.searchForm.pageSize = 10
      this.onSearch()
    },

问题: 此时发现前面都是按照计划实施,到了重置按钮 怎么也无法将搜索条件置空

解析: 其实这不是bug 因为resetFields并不是将内容清空,而是恢复到初始状态,如果一进页localstorage有值 赋值给了searchForm 此时searchForm的初始状态就是这些有值的搜索条件

解决方法:

//只需要将赋值的操作放到mounted 而不是created里面 因为created钩子函数就是初始化data的 把data里面的searchForm初始化成有值的状态 那么resetFields初始化当然也是有值的状态
 mounted() {
    if (storage.get('carOrderCenter')) {  //如果localStorage内存储了当前列表的搜索条件 就赋值
      this.searchForm = storage.get('carOrderCenter')
    }
    this.getOrderList()
  },