vuex保存可视化数据步骤 DavaV动态加载更新数据

vuex保存可视化数据步骤

逻辑：打开可视化窗口–>获取接口数据–>存储到 vuex

①在api目录创建接口

export function GetVisualization() {
  return request({
    url: 'api/broadbandOpenAccount/visualization',
    method: 'get',
  })
}

②提交mutations，改变状态

获取校区数据后需要提交mutations，这是唯一更改Vuex中store状态的方式

mutations: {
  SET_VISUALIZATION_DATA: (state, myAllVisualizationData) => {
    state.visualizationData = myAllVisualizationData
  }
}

③添加getters

我们在 store下新建一个文件 getters.js

const getters = {
  visualizationData: state => state.davaV.visualizationData,
}
export default getters

④获取数据

// 1.导入vuex
import { mapGetters } from "vuex";


  computed: {
    ...mapGetters({
      // 把 `this.visualization_data` 映射为 `this.$store.getters.visualization_data`
      visualization_data: "visualization_data",
    }),
  },
  
  // 在方法中使用
  this.visualization_data.numberOfMalesByGender

⑤初始化数据

// 最外层的index初始化数据
  // 在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。
  beforeCreate() {},
// 初始化数据，调用接口
this.$store.dispatch("GetvisualizationData").then(() => {});

// 定时更新数据

完整代码：

<template>
  <div class="box1">
    <datav />
    <!-- {{ visualization_data }} -->
    <!-- {{ visualization_data.numberOfAccountsOpenedThisSchoolYear }} -->
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import datav from "./datav/index";

export default {
  components: {
    datav,
  },

  computed: {
    ...mapGetters(["visualization_data"]),

    visualization() {
      return this.visualization_data;
    },
  },

  methods: {
    // 获取数据方法
    getvisualizationData() {
      this.$store.dispatch("GetvisualizationData").then(() => {});
    },
  },

  // 在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。
  beforeCreate() {
    // 发起请求保存数据到vuex
    this.$store.dispatch("GetvisualizationData").then(() => {});
  },

  mounted() {
    setInterval(this.getvisualizationData, 30000);
  },



};
</script>

<style>
.box1 {
  background-color: aliceblue;
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}
</style>

问题：怎么监听异步的数据加载完才更新页面

⑥更新数据

// 1.导入vuex
import { mapGetters } from "vuex";

  computed: {
    ...mapGetters(["visualization_data"]),

    visualization() {
      return this.visualization_data;
    },
  },
  // 组件监听
  watch: {
    // watch 可以监听 data 数据 也可以监听 全局 vuex数据
    visualization(newData, oldData) {
        //option参数，或者DavaV的createData()方法里面的内容
    },
  },