Question

请你帮我解决与Vue组件重新渲染相关的问题。我通过消费Promise来获取数据。一旦数据在特定属性链（visualData.layout.cube ...）下可用，我就为一个DATA属性赋值（label，indicatorValue ...）。

不幸的是，当Promise下的数据发生变化时，组件没有重新渲染选项（例如，当使用应用程序过滤器或点击某些图表或其他任何内容时）。当我在路由之间切换或重新加载页面时，组件数据会发生变化。

观察Promise变化的Vue解决方案是什么？

data() {
    return {
        label: null,
        indicatorState: null,
        indicatorValue: null,
    }
},
computed: {
  isAppReady() {
    return this.$store.getters.isAppReady;
  },
},
mounted() {
  this.$store.watch(() => this.isAppReady, (status) => {
    if (status) { // if STATUS === true
      this.getData();
    }
  });

  if (this.isAppReady) {
    this.getData();
  }
},
methods: {
  getData() {
    return this.appMethods // global object gathering specific methods like .getObject, .getField etc.
      .getObject(null, this.visualID)
      .then(visualData => visualData.layout.cube.dataPages[0].matrix[0])
      .then((transformedData) => {
        this.label = transformedData[0].qText;
        this.indicatorValue = transformedData[1].qText;
        this.indicatorState = Number(transformedData[1].qNum) > 0;
      });
  },
},

Answer 1

由于您使用的是Vuex，我会将数据提取与组件分开，

将function isValidTimeStampFormat($timestamp){ $pattern = "(^(2[0-3]|[0-1]{0,1}[0-9]):[0-5][0-9]'[0-5][0-9].[0-9]{1,3}$)| (^(2[0-3]|[0-1]{0,1}[0-9]):[0-5][0-9]'[0-5][0-9]$)| (^(2[0-3]|[0-1]{0,1}[0-9]):[0-5][0-9].[0-9]{1,3}$)| (^(2[0-3]|[0-1]{0,1}[0-9]):[0-5][0-9]$)"; return (preg_match("<$pattern>", $timestamp) == 1)? true : false; }方法移至服务
在您要调用刷新的任何组件的单击处理程序中调用它
将新数据推送到商店
从商店访问属性

服务代码

getData()

通过组件

中的计算机来观察它

getData() {
  return this.appMethods 
    .getObject(null, this.visualID)
    .then(visualData => visualData.layout.cube.dataPages[0].matrix[0])
    .then((transformedData) => {
      this.$store.commit('SET_MY_DATA', transformedData);
    });
}

如何在Promise值更改时重新生成componet

1 个答案: