第一种方法:vuex
在store的scene.js文件中,先异步获取数据库数据
import { apiCommon } from "api-core";
const state = {
sceneGroup: []
};
const mutations = {
GET_SCENE_GROUP_DATA: (state, sceneGroup) => {
state.sceneGroup= sceneGroup;
}
};
const actions = {
async getSceneGroupData({ commit }) {
const res = await apiCommon({
//个人代码
});
commit("GET_SCENE_GROUP_DATA", res.data.data);
}
};
export default {
state,
mutations,
actions
};
父组件HomeScene:在created生命周期中对getSceneGroupData()方法进行加载
created() {
//忘记了dispatch的话,getSceneGroupData()是不会执行的
this.$store.dispatch("getSceneGroupData");
console.log(this.$store.state.sceneState);
},
这样就可以在全局中获取数据,实现实时更新
第二种方法:父子组件传值(推荐)
子组件Dialog:在dialog文件保存时,向父组件传递$emit
async save() {
const res = await apiCommon({
//个人代码
});
if (res.data.code != 0) {
this.$message.error(res.data.msg);
} else {
this.$message({
message: res.data.msg,
type: "success"
});
this.addSceneGroup = false;
//向父组件传递$emit
this.$emit('success')
}
}
父组件Home:接收到success之后,对数据进行重新获取
<Dialog @success="refreshGroup"></Dialog>
async refreshGroup(){
const resSceneGroup = await apiCommon({
//个人代码
});
this.sceneGroup = resSceneGroup.data.data.reverse();
},