I am currently working with the following store setup:
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
export default new Vuex.Store({
plugins: [createPersistedState()],
state: {
data: [
{symbol: '', price: ''}
]
},
mutations: {
RECEIVE_PRICE(state, {symbol, price}) {
state.data = {
symbol: symbol,
price: price
}
// state.data.push({
// symbol: symbol,
// price: price
// });
}
},
actions: {
async FETCH_PRICE({commit}, payload) {
const url = `https://min-api.cryptocompare.com/data/price?fsym=${payload.symbol}&tsyms=${payload.currency}`;
const {data} = await axios.get(url);
commit('RECEIVE_PRICE', {
symbol: payload.symbol,
price: data[payload.currency]
});
}
},
getters: {
crypto_prices: state => {
return state;
}
}
})
Within my component, I have created a form consisting of three inputs for Symbol, Amount, and Currency.
Upon calling my getter within the component using
computed: mapGetters(['crypto_prices'])However, there is an issue:
Whenever I add a new cryptocurrency, the existing data in my store gets replaced by the new entry. How can I modify my mutation to append the new data instead?
I attempted this by using store.data.push({...}), but it resulted in duplicates...