背景:使用store中存的值来控制子页面的显示;
1.父页面代码(父页面有以下几个子页面需要控制展示):
<el-col :span="19" v-show="activeIndex==2">
<service :bCompany="bCompany" :serviceList="serviceList" :key="bCompany.bcid"></service>
</el-col>
<el-col :span="19" v-show="activeIndex==3">
<example :bCompany="bCompany" :caseList="caseList" :key="bCompany.bcid"></example>
</el-col>
<el-col :span="19" v-show="activeIndex==8">
<service-details :bCompany="bCompany"></service-details>
</el-col>
<el-col :span="19" v-show="activeIndex==9">
<example-details :bCompany="bCompany" :caseList="caseList" :key="bCompany.bcid"></example-details>
</el-col>
2.现在需求是要从子页面example列表跳转到子页面example-details详情页面并且带值,跳转成功之后详情子页面要执行axios查询方法。两个子页面使用store进行传参。
example页面代码:点击todetail方法的时候展示详情子页面
<el-row :gutter="30" class="content" v-if="caseList.length>0">
<el-col :span="8" v-for="(item,index) of caseList" :key="index">
<el-card shadow="none">
<el-image style="width: 100%; height: 240px" :src="circleUrl+item.caseLogoPath" fit="fill"></el-image>
<div class="infomation"><b style="display: inline-block; margin-top: 15px;cursor: pointer;" @click="todetail(item)">{{item.caseTitle}}</b></div>
</el-card>
</el-col>
</el-row>
todetail(item){
this.$store.commit("website/RECORD_activeIndex",'9')
this.$store.commit("website/RECORD_isdetail2",true)
this.$store.commit("website/RECORD_isdetail6",item)
},
下面看一下isdetail6在store中的定义:(isdetail6:{})object类型
const state = {
//导航
activeIndex: "1",
// 工坊服务详情
isdetail: false,
isdetail2: false,
isdetail3:{},
isdetail4:{},
isdetail5:{},
isdetail6:{},
}
const mutations = {
RECORD_activeIndex: (state, activeIndex) => {
state.activeIndex = activeIndex
},
RECORD_isdetail: (state, isdetail) => {
state.isdetail = isdetail
},
RECORD_isdetail2: (state, isdetail2) => {
state.isdetail2 = isdetail2
},
RECORD_isdetail3: (state, isdetail3) => {
state.isdetail3 = isdetail3
},
RECORD_isdetail4: (state, isdetail4) => {
state.isdetail4 = isdetail4
},
RECORD_isdetail5: (state, isdetail5) => {
state.isdetail5 = isdetail5
},
RECORD_isdetail6: (state, isdetail6) => {
state.isdetail6 = isdetail6
},
}
const actions = {
}
export default {
namespaced: true,
state,
mutations,
actions
}
注意:要中声明,不然得不到值:(代码如下)
const getters = {
hasLoginbg: state => state.login.hasLoginbg,
stepnum: state => state.login.stepnum,
stepCom: state => state.login.stepCom,
comloginsteps: state => state.login.comloginsteps,
comCertisteps: state => state.login.comCertisteps,
personalpoststep: state => state.login.personalpoststep,
activeIndex: state => state.website.activeIndex,
isdetail: state => state.website.isdetail,
isdetail2: state => state.website.isdetail2,
isdetail3: state => state.website.isdetail3,
isdetail4: state => state.website.isdetail4,
isdetail5: state => state.website.isdetail5,
isdetail6: state => state.website.isdetail6
}
export default getters
接下来看一下详情子页面:
注意:下边代码是有问题的;首先接store中的值,然后执行mounted中的querycertificate方法;
问题就是子页面mounted在父页面刷新的时候就已经执行了,这个时候并不会再次执行,父页面并没有给isdetail6赋值。所以this.isdetail6.zwcId在这里没有值,这个方法也就失去了作用。
computed: {
...mapGetters(['isdetail2','isdetail6'])
},
mounted() {
this.querycertificate()
},
methods: {
querycertificate(){
//查询工坊案例图片
this.$api.uploadfile.querySysUploadfileListByType('keyId='+this.isdetail6.zwcId+'&docType=05').then((res) => {
if (res.code == "0000") {
this.urls = res.data
} else {
this.$message({message: '错误原因:' + res.msg, type: 'error'})
}
}).catch((res) => {
this.$message({message: res.msg, type: 'error'});
});
}
}
问题已找出,这个时候就需要用到watch监听一下这个isdetail6变化的时候在执行查询方法。
watch: {
isdetail6(newName, oldName) {
this.querycertificate(newName)
}
}
deep
然而这样却报一个错误说类型不对;查询资料得知watch里面还有一个属性 deep
,默认值是 false
,代表是否深度监听,然后修改如下:
watch: {
// 深度 watcher
isdetail6: {
handler: function (val, oldVal) {
this.querycertificate(val.zwsId)
},
deep: true
}
}
deep
的意思就是深入观察,监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器,但是这样性能开销就会非常大了,任何修改obj
里面任何一个属性都会触发这个监听器里的 handler。
优化,我们可以是使用字符串形式监听。代码如下:
watch: {
// 深度 watcher
'isdetail6.zwcId': {
handler: function (val, oldVal) {
this.querycertificate(val)
},
immediate: true
}
}
好了,这样就解决了现存问题,如果帮助到您请给个三连,谢谢。