Question

我在Vuex商店中有一个对象portfoliosData。该对象具有属性metrics

  state: {
    portfoliosData: {
      performance: [],
      metrics: []
    },

执行操作时，我在商店中更改了属性，并希望在表中显示更新。

 <div id="amsample">
  <div id="chartdiv"></div>
   <v-tabs-items  :touchless="true">
      <v-tabs-content :key="0" id="tab-1">
        <v-card flat>
          <v-card-text>
            Return Performance
            <v-data-table
              :headers="headers"
              :items="metrics"
              :custom-sort="sortPercentage"
              hide-actions
              class="elevation-1"
            >
              <template slot="items" scope="props">
                <td>{{ props.item.name }}</td>
                <td class="text-xs-right">{{ props.item.acRet }}</td>
                <td class="text-xs-right">{{ props.item.anRet }}</td>
                <td class="text-xs-right">{{ props.item.anVol }}</td>
                <td class="text-xs-right">{{ props.item.maxDd }}</td>
                <td class="text-xs-right">{{ props.item.sRatio }}</td>
                <td class="text-xs-right">{{ props.item.inRatio }}</td>
              </template>
            </v-data-table>
          </v-card-text>
        </v-card>
      </v-tabs-content>
    </v-tabs-items>
 </div>

在组件表中观察指标变量。

data() {
      return {

        headers: [
          {text: 'Measure', value: 'name', sortable: false},
          {text: 'Accumulative Return', value: 'acRet'},
          {text: 'Annual Return', value: 'anRet'},
          {text: 'Annual Volatility', value: 'anVol'},
          {text: 'Max Drawdown', value: 'maxDd'},
          {text: 'Sharpe Ratio', value: 'sRatio'},
          {text: 'Information Ratio', value: 'inRatio'},
        ],
        metrics: []
      }
    },

当我在组件中调用动作时，会从商店中获取更新的metrics

//Component
  calulateMetrics(event) {
    this.$store.dispatch('performeMetricsCalculation', {dataZoomStart:event.startDate, dataZoomEnd:event.endDate}).then(() => {
      this.metrics = this.$store.getters.getMetrics;
      console.log("Calculated metric", this.metrics)
    })
  },

//actions
performeMetricsCalculation({dispatch, commit, getters}, {dataZoomStart, dataZoomEnd}) {
  //console.log("performeMetricsCalculation", dataZoomStart, dataZoomEnd)

  return new Promise((resolve, reject) => {
    dispatch('performSetRangeTime', {dataZoomStart: dataZoomStart, dataZoomEnd: dataZoomEnd}).then(() => {
      dispatch('performMetrcisUpdating').then(() => {
        commit('resetUpdateStatus')
      })
    })
    resolve()
  })
},

performMetrcisUpdating({commit}) {
  return new Promise((resolve, reject) => {
    commit('calculateMetrics')
    resolve()
  })
},

在调试期间，我打印了metrics变量，发现数据与初始变量不同。但是该表不会更新。

在mutations中，我使用以下逻辑

calculateMetrics({portfoliosData, period, status}) {
  let updatedMetrics = []

  for (let s in portfoliosData.performance) {
    if (portfoliosData.performance.hasOwnProperty(s)) {
      //console.log("Calculate metrics", period.startDateIdx, period.endDateIdx)
      let port = {...portfoliosData.performance[s]}

      updatedMetrics.push({
        name: port.name,
        maxDd: maxDrawdown(port.data, period.startDateIdx, period.endDateIdx),
        acRet: accumulativeReturn(port.data, period.startDateIdx, period.endDateIdx),
        anRet: annualReturn(port.data, period.startDateIdx, period.endDateIdx),
        anVol: annualVolatility(port.data, period.startDateIdx, period.endDateIdx),
        sRatio: sharpeRatio(port.data, period.startDateIdx, period.endDateIdx),
        inRatio: informationRatio(port.data, period.startDateIdx, period.endDateIdx)
      })

      if (!status.isUpdated) {
        portfoliosData.metrics = updatedMetrics
      } else {
        Vue.set(portfoliosData, 'metrics', updatedMetrics)
      }
    }
  }
}

在不执行任何操作的情况下获取数据时，更新表没有问题。但是，当我要更新表时，尽管metrics变量发生了变化，但新数据无法呈现。看起来很奇怪。

我仅在这种特定情况下才观察到此问题。我也尝试将:items="metrics"更改为:items=$store.getters.getMetrics，但这也无济于事。

Answer 1

我认为您可以将mutations更改为

calculateMetrics(state) {
  let {portfoliosData, period, status} = state // ES6 syntax
  let updatedMetrics = []

  for (let s in portfoliosData.performance) {
    if (portfoliosData.performance.hasOwnProperty(s)) {
      //console.log("Calculate metrics", period.startDateIdx, period.endDateIdx)
      let port = {...portfoliosData.performance[s]}

      updatedMetrics.push({
        name: port.name,
        maxDd: maxDrawdown(port.data, period.startDateIdx, period.endDateIdx),
        acRet: accumulativeReturn(port.data, period.startDateIdx, period.endDateIdx),
        anRet: annualReturn(port.data, period.startDateIdx, period.endDateIdx),
        anVol: annualVolatility(port.data, period.startDateIdx, period.endDateIdx),
        sRatio: sharpeRatio(port.data, period.startDateIdx, period.endDateIdx),
        inRatio: informationRatio(port.data, period.startDateIdx, period.endDateIdx)
      })


    }
  }
   portfoliosData.metrics = updatedMetrics
   state.portfoliosData = JSON.parse(JSON.stringify(portfoliosData)) // assign to new object
}

我们需要创建一个新对象（我使用JSON.parse（JSON.stringify（））技术）来使vuex理解数据已更改。

v-data-table不会更新新数据

1 个答案: