如题 现有两个页面,接单页面和订单详情页面。接单页面有一个查询弹窗。
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后,自带的重置功能就不能使用了,否则切换页面回来后重置也只能重置成保存后的条件,需要手动重置
END
版权声明:本文为weixin_43961652原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。