vue2+若依+页面切换刷新回来后保留数据

最新推荐文章于 2025-02-27 10:11:19 发布

原创最新推荐文章于 2025-02-27 10:11:19 发布 · 7.5k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #vue

2021.11.19开始的实习记录本专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在Vue2和若依框架中利用Vuex保存页面切换时的搜索条件，避免刷新后数据丢失。通过创建Vuex模块、暴露store以及在组件生命周期中操作数据，成功实现页面间数据持久化。同时，文章提到在清空功能中也需要考虑保存状态，并指出JSON.stringify()方法在判断对象为空时可能存在的问题。

如题现有两个页面，接单页面和订单详情页面。接单页面有一个查询弹窗。

1、默认将客服设置成当前登录的人员，并只展示出该客服负责的订单

2、重新设置了搜索条件，进入订单详情页面再回来，页面会刷新，搜索条件也会被重置，希望不要重置搜索条件而是进行保留

讲道理，昨天第一个需求提出来的时候我可以把它给实现了，第二个需求提出来的时候我愣是傻了，单以为只要切换页面就必定会刷新页面，搜索条件必重置，做不了

今天上午来，又看了一遍需求，突然想到为什么我第一个需求可以用vuex写出来，第二个为啥不能

于是看了一下若依框架里的vuex代码，把功能实现出来了，和原生的vue用法基本一致。

一、写vuex

src->store->modules里新建一个search.js（因为有两个页面需要完成这个功能，所以写了两个state）

const search = {
  state:{
    orderSearch: {},
    invoiceSearch: {}
  },
  mutations:{
    SET_ORDER:(state, val) =>{
      state.orderSearch = val
    },
    SET_INOVICE:(state, val)=>{
      state.invoiceSearch = val
    }
  }
}

export default search

二、

在src-store的index.js里把刚刚的search.js暴露（？）出去

import search from './modules/search.js'
modules: {
    search
  },

三、使用

在mounted里把vuex里的数据拿出来，在beforcDestory里把搜索条件存进vuex

记得在清空功能里也存一下！

mounted() {
      this.queryParams.serviceCode = this.$store.state.user.name
      this.queryParams.serviceName = this.$store.state.user.nickName
      if(Object.keys(this.$store.state.search.orderSearch).length){
        this.queryParams = this.$store.state.search.orderSearch
      }
      this.getList();
    },

判断对象是否为空的方法①JSON.stringify(obj).length=='{}' ②Object.keys(obj).length

不知道为啥我第一个方法是没有用的，我之后再研究哈，这里用的是第二种

————

beforeDestroy(){
      this.$store.commit('SET_ORDER', this.queryParams)
    },

————

//重置
      searchResetClick() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 50,
          serviceCode: '',
          serviceName: '',
        }
        this.$forceUpdate()
        this.$store.commit('SET_ORDER', {})
      },

用vuex后，自带的重置功能就不能使用了，否则切换页面回来后重置也只能重置成保存后的条件，需要手动重置