I'm currently in the process of building a Vue application to help me learn more about web development. I've hit a roadblock when it comes to updating an array in my state with data from an API. Here's a snippet of the API response:
{
"stations": [
{
"id": 1,
"name": "Station 1",
},
{
"id": 2,
"name": "Station 2",
}
]
}
Here is the action defined in my Vuex store (the ApiService is responsible for returning the axios response):
actions: {
fetchStations({ commit }) {
let promise = ApiService.getStations()
promise.then(res => {
console.log(res.data)
commit('SET_STATIONS', res.data)
})
},
And here is the mutation:
mutations: {
SET_STATIONS(state, stations) {
state.stations = stations
},
After logging the res.data in the developer tools, I noticed that the id of both objects is '2' even though they are different in the database.
Interestingly, if I comment out the commit line in my action like this:
actions: {
fetchStations({ commit }) {
let promise = ApiService.getStations()
promise.then(res => {
console.log(res.data)
// commit('SET_STATIONS', res.data)
})
},
The issue disappears and res.data appears to be completely different.
Could someone explain why this happens and provide insight on how I could resolve it?
Thank you!