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.