element ui+vue实现dialog关闭主页数据更新

第一种方法：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();
},