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();
},