After extracting two sets of balances from my vuex state, I decided to merge them into a new array of entries. However, an error is thrown when I try to loop through my copies of the vuex state. Am I missing something?
It seems that the issue lies in the fact that .filter() returns a new array, breaking the connection between coins and the $state.
Even though I am not directly modifying the vuex state, I am still being cautioned against mutating it outside of mutations when dealing with its copies.
Although these assignments may seem like references to the vuex store, they are not (or are they?). I have been trying to figure out what's causing the problem here, but I can't seem to pinpoint it. Any help would be greatly appreciated. Thank you!
filteredItems() {
let coins = this.$store.state.wallet.balances.filter(( item ) => this.getCoinPropertiesByTicker(item.ticker).staking_available);
const stakingCoins = this.$store.state.wallet.stakingBalances;
-> coins.forEach((coin) => { // the error occurs at this point
const stakingCoin = stakingCoins.user.stats.find((name) => name.ticker === coin.ticker)
if (stakingCoin) {
coin.totalAmount = {
amt: new BigNumber(stakingCoin.balance).decimalPlaces(8).toString(),
usd: new BigNumber(stakingCoin.balance_usd).decimalPlaces(2).toString()
}
}
return coins
}
[Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside mutation handlers."
(found in <Root>)
vue.esm.js?a026:1897 Error: [vuex] do not mutate vuex store state outside mutation handlers.
at assert (vuex.esm.js?2f62:90)
at Vue.store._vm.$watch.deep (vuex.esm.js?2f62:793)
at Watcher.run (vue.esm.js?a026:4577)
at Watcher.update (vue.esm.js?a026:4551)
at Dep.notify (vue.esm.js?a026:739)
at Object.reactiveSetter [as amountStaked30] (vue.esm.js?a026:1064)
at eval (Staking.vue?3a4a:134)
at Array.forEach (<anonymous>)
at VueComponent.filteredItems (Staking.vue?3a4a:115)
at Watcher.get (vue.esm.js?a026:4488)