Within my Vuex store, I have an object called portfoliosData which contains a property named metrics.
state: {
portfoliosData: {
performance: [],
metrics: []
},
When I trigger an action, I update the property in the store and aim to display these updates in a table.
<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>
The component's table is observing the changes made to the metrics variable.
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: []
}
},
After invoking an action in the component, I retrieve the updated metrics from the store.
// 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 }) {
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()
})
},
While debugging, I noticed that the data in the metrics variable differs from its initial state, yet the table does not reflect these changes.
Within the mutations, I implement the following logic:
calculateMetrics({ portfoliosData, period, status }) {
let updatedMetrics = []
for (let s in portfoliosData.performance) {
if (portfoliosData.performance.hasOwnProperty(s)) {
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)
}
}
}
}
Although there are no problems with updating the table when fetching data without executing an action, the new data does not render when trying to update the table. This discrepancy is peculiar.
This issue is specific to this particular case. Additionally, I attempted to change :items="metrics" to :items=$store.getters.getMetrics but it did not resolve the problem.