Hello fellow developers, I am currently working on an app using Java for the back end and Vue for the front end. I am facing a challenge with my fetch to the endpoint to retrieve data. The process involves promises that extract the data as each one gets committed. Despite successful storage and display in the management state (Vuex), when trying to retrieve it from a component of the SPA, I encounter the status: Promise {}
Let's consider the method where the endpoint fetch is enclosed:
allGames({ commit }) {
fetch("/crabs/game/all", {
credentials: "include",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
method: "GET",
})
.then((response) => {=================FIRST PROMISE, RETURNING THAT DATA CONVERTED TO JSON
console.log(response);
return response.json();
})
.then((response) => {=====SECOND PROMISE WOULD COMMIT THAT DATA IN A MUTATION TO MODIFY THE STATE
response
console.log(response);
commit("setAllGames", response);
})
.catch((error) => {======HANDLING ERROR ON THE FETCH
console.log(error);
});
},
The related mutations, state, and getters are like this:
State
allGamesData: {},
Mutations
setAllGames(state, payload) {
state.allGamesData = payload;
},
Getters
getAllGames: (state) => {
console.log(state.allGamesData;)===verifying the data stored in state
state.allGamesData;
},
When triggering the component to fetch the data:
Home View Component
template>
<v-container >
<GameComponent ></GameComponent>
</v-container>
</template>
<script>
import { mapActions, mapGetters } from "vuex";
export default {
name: "Home",
data() {
return {};
},
components: {},
methods: {
...mapActions(["allGames"]),
},
computed: {
...mapGetters(["getAllGames"]),
},
created() {
this.allGames()
console.log(this.allGames());
}
};
</script>
By calling the created() function, I initiate the action of getting all the data, accessing the Vuex function allGames, but I notice the status of Promise Pending in the logs.
https://i.sstatic.net/QFlDv.png
This seems to hinder the progress in the process. Any advice on what I could improve? Thank you very much!