Forum : [Vuex] mapGetter vide

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Voila, je suis entrain de suivre le tutoriel Laravel - Partie 2 : VueJS. vers les 30min de la vidéo, Grafikart parle de mapGetters.
Il me semble suivre son tutoriel à la lettre (mais du coup je ne suis plus très sur).

Ce que je veux

Via la méthode ...mapGetters je veux obtenir la liste des utilisateurs à travers l'API.

{ "2": { "name" : "John Doe 1", "id":2 }, "3": { "name" : "John Doe 2", "id":3 }, "4": { "name" : "John Doe 3", "id":4 }, ... }

Ce que j'obtiens

Sauf que j'obtiens une liste vide

{}

Mes codes

store.js

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const get = async function (url) { let response = await fetch(url, { credentials: 'same-origin', headers: { 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content') } }) if (response.ok) { return response.json() } else { let error = await response.json() throw new Error(error.message) } } /** * { * 1: { * id: 1, * name: 'John Doe 1', * unread: 0, * count: 100, messages: [{ id, from_id, to_id... }] * } * } */ export default new Vuex.Store({ strict: true, state: { conversations: {} }, getters: { conversations: function(state) { return state.conversations } }, mutations: { addMessages: function (state, {conversations}) { let obj = {} conversations.forEach(function (conversation) { obj[conversation.id] = conversation }) state.conversations = obj } }, actions: { loadConversations: async function (context) { let response = await get('/api/conversations') context.commit('addMessages', {conversations: response.conversations}) } } })

MessagerieComponent.vue

<template> <div class="row"> <div class="col-md-3"> <div class="list-group"> <a class="list-group-item d-flex justify-content-between align-items-center"> John Doe {{ user }} <span class="badge badge-pill badge-primary">0</span> </a> {{ conversations }} </div> </div> </div> </template> <script> import { mapGetters } from 'vuex' export default { props: { user: Number }, computed: { ...mapGetters([ 'conversations' ]) }, mounted() { this.$store.dispatch('loadConversations') }, } </script>

Auriez-vous une idée ?

Merci par avance

3 réponses

PhiSyX,

il y a 7 ans

Yop. Est-ce que tu as des données qui te sont retournées au moins par ta requête?
Que vaut response (in loadConversations)?

Alban Lautie,

il y a 7 ans

Hello, il manque le await devant ton responce.json()

... if (response.ok) { return await response.json() } ...

Par contre la méthode get n'apporte pas grand chose tu peux appeler fetch directement dans un try catch pour catcher l'erreur.

Lucky R.,

il y a 7 ans

@PhiSyx, Voici un console.log(response dans ma finction loadConversation :

{…} conversations: (9) […] 0: Object { name: Getter & Setter, id: Getter & Setter, … } 1: Object { name: Getter & Setter, id: Getter & Setter, … } 2: Object { name: Getter & Setter, id: Getter & Setter, … } 3: Object { name: Getter & Setter, id: Getter & Setter, … } 4: Object { name: Getter & Setter, id: Getter & Setter, … } 5: Object { name: Getter & Setter, id: Getter & Setter, … } 6: Object { name: Getter & Setter, id: Getter & Setter, … } 7: Object { name: Getter & Setter, id: Getter & Setter, … } 8: Object { name: Getter & Setter, id: Getter & Setter, … } length: 9 __proto__: Array [] __proto__: Object { … }

Il me retourne bien le nombre d'élément que je souhaite retourner dans mon MessagerieConversation.vue

@Alban Lautie, c'est surement vraie. Je suis le tuto de Grafikart pour apprendre donc certainement qu'il doit y avoir plusieurs solutions.
merci pour le await absent ;)