业务场景重现
现在我的App.vue里面有一个头部的公共组件,头部组件里有一个输入框,当我输入词条时,将词条传进App.vue里的里的.vue页面,并进行查询获取数据
解决思路如下:
1.如何拿到头部的词条
2.当词条改变时如何触发.vue里的请求数据事件
解决方案
我是用vuex数据仓库来存储词条的,当词条改变时,修改数据仓库里的词条
然后在.vue页面里监听这个词条,当词条改变时触发请求数据的事件
代码
数据仓库store.js
import Vue from 'vue';
import Vuex from 'vuex';
import tab from './tab'; //这段是其他的
Vue.use(Vuex);
const store = new Vuex.Store({
modules:{
tab //这段是其他的
},
state: {
dev_id: '' //存库词条的变量
},
mutations: { //修改数据仓库的事件
changeDev_id(state,value){
state.dev_id = value
}
},
actions: { //推荐使用的异步修改数据仓库
setDev_id(context,value){
context.commit('changeDev_id',value)
}
}
});
export default store;
App.vue里的header组件
// 改变公司
getCompany(value){
console.log(value,"改变公司value")
if(value){
//当输入词条时,将词条更新到数据仓库
this.$store.dispatch('setDev_id',value)
}
},
监听页面里监听词条
// 计算属性+监听器
computed:{
getDev_id(){
return this.$store.state.dev_id
}
},
watch:{
getDev_id:{
handler(newValue,oldValue){ //当词条改变时执行事件
// console.log(newValue,)
this.dev_id=newValue
this.queryInfo(); //刷新接口的函数
}
}
},