Vue2+ Ruoyi+ page switching refreshes and retains data after returning

For example, there are two pages, the order page and the order details page. There is a query pop-up window on the order page.

1. By default, the customer service is set as the currently logged-in person, and only the orders that the customer service is responsible for are displayed

2. Reset the search criteria, enter the order details page and come back, the page will be refreshed, and the search criteria will also be reset, I hope that the search criteria will not be reset but reserved

 

 

 To be reasonable, when the first requirement was raised yesterday, I was able to realize it. When the second requirement was raised, I was stunned. I just thought that as long as I switch pages, the page will be refreshed and the search conditions will be reset. ,can not do this

Came here this morning, looked at the requirements again, and suddenly thought why my first requirement can be written in vuex, but why can’t the second one

So I took a look at the vuex code in the Ruoyi framework, and realized the function, which is basically the same as the original Vue usage.

1. Write vuex

Create a new search.js in src->store->modules (because there are two pages that need to complete this function, so write two states)

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

export default search

two,

Expose (?) the search.js just now in the index.js of src-store

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

Three, use

Take out the data in vuex in mounted, and save the search conditions in vuex in beforcDestory

Remember to save it in the clear function too!

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();
    },

Method for judging whether an object is empty ①JSON.stringify(obj).length=='{}' ②Object.keys(obj).length

I don’t know why my first method is useless, I will study it later, the second method is used here

————

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

————

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

After using vuex, the built-in reset function cannot be used. Otherwise, after switching the page and returning, the reset can only be reset to the saved condition, and manual reset is required.

END