boyjarv's avatar

How can I mapState?

Below I am trying to map State from returning venue but I'm getting a bit confused?!

computed: {
            ...mapState('venues/venues', {
                venue: state => state.venues,
            })
        },
        async asyncData({ params, $axios }) {
            const venue = await $axios.get(`/venues/${params.venue}`)
            return { venue }
        }

in my store, I have:

const state = () => ({
    venues: [],
    venue: {},
    venue_id: 0,
    venuename: '',
    postcodes: [],
    pagination: {
        page: 1,
        limit: 10,
        totalPages: 0
    }
})

The result I get from my async api call is:

{ "data": [ { "id": 51166, "fsa_id": 546117, "user_id": null, "email": null, "venuename": "Wrexham Rugby Club", "slug": "wrexham-rugby-club", "venuetype": null, "address": "Wrexham Rugby Club Bryn Estyn Road, Wrexham, Wrexham", "address2": null, "town": "Wrexham Rugby Club Bryn Estyn Road", "county": "Wrexham", "postcode": "LL13 9TY", "postalsearch": null, "telephone": null, "easting": "335808", "northing": "351078", "latitude": "53.053094", "longitude": "-2.959124", "local_authority": "Wrexham", "website": null, "photo": "images/venues/m0w0omdbElv2cnWuXe3UbzZfeOK3Q0OA3tTRSxZD.jpg", "is_live": 1, "created_at": null, "updated_at": "2021-09-22T20:11:18.000000Z" } ], "status": 200, "statusText": "OK", "headers": { "cache-control": "no-cache, private", "content-type": "application/json" }, "config": { "url": "/venues/51166", "method": "get", "headers": { "Accept": "application/json, text/plain, */*" }, "baseURL": "http://jwtapi.test/api", "transformRequest": [ null ], "transformResponse": [ null ], "timeout": 0, "xsrfCookieName": "XSRF-TOKEN", "xsrfHeaderName": "X-XSRF-TOKEN", "maxContentLength": -1, "maxBodyLength": -1, "transitional": { "silentJSONParsing": true, "forcedJSONParsing": true, "clarifyTimeoutError": false } }, "request": {} }
0 likes
7 replies
boyjarv's avatar

@vincent15000 no real issue, just my 'VENUE' is:

venue.data[0]

maybe It should be mapped to state ?!

vincent15000's avatar

@boyjarv Ok I understand ... assuming you generate your array with a resource, you can add this in your AppServiceProvider.php.

JsonResource::withoutWrapping();

If you want, you can post the code of your controller for the /venues/${params.venue} API route.

boyjarv's avatar

@vincent15000

VenueController show method for /venues/{id}

public function show($id)
    {
        return Venue::where('id', $id)->get();
    }
vincent15000's avatar

@boyjarv I'm not sure, but you can try this.

return Venue::where('id', $id)->get()->toArray();

Or ...

return Venue::find($id)->toArray();
boyjarv's avatar

I'm not using resource files, maybe I should?! hmm

vincent15000's avatar

@boyjarv I have tried with and without resource files, I find that it's easier to manipulate API data with resources because then you are able to format your array exactly as you need to send them to the front.

Please or to participate in this conversation.