Vuex retrieve data from laravel

Question

I am new to vue/vuex. I am currently working on a laravel projet that had that installed for the front end part and I am banging my head trying to understand how all of this works.

I need to retrieve the folder_path of an episode. My API url looks like this

http://xxx.test/api/episodes/1602ff28-fd57-473a-9583-1322ff8fd383

1602ff28-fd57-473a-9583-1322ff8fd383 is the episode UID

{"data":{"type":"episodes","id":"1602ff28-fd57-473a-9583-1322ff8fd383","attributes":{"show_id":"13b8b642-3803-40cb-bb4c-c8f2304b10d9","season_id":"545c68d0-d25d-4f0f-96d6-11824c9976c4","season":10,"episode":22,"name":"The Prisoner","overview":"When it comes to the Stynes, Dean decides to take matters into his own hands.  Sam tries to come to terms with his decision.","still_url":"http:\/\/xxx.test\/images\/episodes\/aiHs8O6jVvfGk6j7R85pRXvQ2HQ.jpg?w=480","air_date":"2015-05-13T00:00:00+00:00","total_views":0,"has_file":true,"folder_path":"\/home\/xxx\/xxx\/public\/downloads\/episodes\/series\/The Curse of Oak Island\/The Curse of Oak Island - Season 01\/The Curse of Oak Island - S01E01.mp4"},"links":{"self":"http:\/\/xxx.test\/api\/episodes\/1602ff28-fd57-473a-9583-1322ff8fd383"},"relationships":{"show":{"links":{"self":"http:\/\/xxx.test\/api\/episodes\/1602ff28-fd57-473a-9583-1322ff8fd383\/relationships\/show","related":"http:\/\/xxx.test\/api\/episodes\/1602ff28-fd57-473a-9583-1322ff8fd383\/show"},"data":{"type":"shows","id":"13b8b642-3803-40cb-bb4c-c8f2304b10d9"}},"season":{"links":{"self":"http:\/\/xxx.test\/api\/episodes\/1602ff28-fd57-473a-9583-1322ff8fd383\/relationships\/season","related":"http:\/\/xxx.test\/api\/episodes\/1602ff28-fd57-473a-9583-1322ff8fd383\/season"},"data":{"type":"seasons","id":"545c68d0-d25d-4f0f-96d6-11824c9976c4"}},"views":{"links":{"self":"http:\/\/xxx.test\/api\/episodes\/1602ff28-fd57-473a-9583-1322ff8fd383\/relationships\/views","related":"http:\/\/xxx.test\/api\/episodes\/1602ff28-fd57-473a-9583-1322ff8fd383\/views"},"data":[]}}},"included":[{"type":"genres","id":"25f8c344-cee1-46e2-a204-e00dd997b2b1","attributes":{"name":"Drama","total_movies":2,"total_shows":3},"links":{"self":"http:\/\/xxx.test\/api\/genres\/25f8c344-cee1-46e2-a204-e00dd997b2b1"}},{"type":"genres","id":"794c4970-1dab-4cfb-9821-4165b4272d91","attributes":{"name":"Mystery","total_movies":1,"total_shows":2},"links":{"self":"http:\/\/xxx.test\/api\/genres\/794c4970-1dab-4cfb-9821-4165b4272d91"}},{"type":"genres","id":"eb579c5a-0864-4d45-9afa-8fcc165c365c","attributes":{"name":"Sci-Fi & Fantasy","total_movies":0,"total_shows":2},"links":{"self":"http:\/\/xxx.test\/api\/genres\/eb579c5a-0864-4d45-9afa-8fcc165c365c"}},{"type":"shows","id":"13b8b642-3803-40cb-bb4c-c8f2304b10d9","attributes":{"tmdb_show_id":1622,"name":"Supernatural","original_name":"Supernatural","folder_name":"series\/The Curse of Oak Island\/The Curse of Oak Island - Season 01\/","overview":"When they were boys, Sam and Dean Winchester lost their mother to a mysterious and demonic supernatural force. Subsequently, their father raised them to be soldiers. He taught them about the paranormal evil that lives in the dark corners and on the back roads of America ... and he taught them how to kill it. Now, the Winchester brothers crisscross the country in their '67 Chevy Impala, battling every kind of supernatural threat they encounter along the way. ","home_page":"http:\/\/www.cwtv.com\/shows\/supernatural","poster_url":"http:\/\/xxx.test\/images\/posters\/KoYWXbnYuS3b0GyQPkbuexlVK9.jpg?w=480","backdrop_url":"http:\/\/xxx.test\/images\/backdrops\/nVRyd8hlg0ZLxBn9RaI7mUMQLnz.jpg?w=1080","number_of_seasons":15,"number_of_episodes":327,"average_runtime":45,"popularity":85.72,"first_air_date":"2005-09-13T00:00:00+00:00","last_air_date":"2020-03-23T00:00:00+00:00","total_views":0,"tmdb_url":"https:\/\/www.themoviedb.org\/tv\/1622","imdb_url":"http:\/\/www.imdb.com\/title\/tt0460681","tvdb_url":"http:\/\/thetvdb.com\/?tab=series&id=78901"},"links":{"self":"http:\/\/xxx.test\/api\/shows\/13b8b642-3803-40cb-bb4c-c8f2304b10d9"},"relationships":{"genres":{"links":{"self":"http:\/\/xxx.test\/api\/shows\/13b8b642-3803-40cb-bb4c-c8f2304b10d9\/relationships\/genres","related":"http:\/\/xxx.test\/api\/shows\/13b8b642-3803-40cb-bb4c-c8f2304b10d9\/genres"},"data":[{"type":"genres","id":"25f8c344-cee1-46e2-a204-e00dd997b2b1"},{"type":"genres","id":"794c4970-1dab-4cfb-9821-4165b4272d91"},{"type":"genres","id":"eb579c5a-0864-4d45-9afa-8fcc165c365c"}]}}},{"type":"seasons","id":"545c68d0-d25d-4f0f-96d6-11824c9976c4","attributes":{"show_id":"13b8b642-3803-40cb-bb4c-c8f2304b10d9","season_number":10,"name":"Season 10","overview":"Season 10 begins with Sam\u2019s frantic search for his missing brother, who is gone without a trace. The road to recovering the wayward Dean takes Sam down dark paths, with consequences that will shake the boys to their core. Meanwhile, Castiel has to pick up the pieces in the aftermath of Metatron\u2019s campaign. With his grace failing and rogue angels still on the loose, Cas will face the ticking clock of his own mortality as all-new threats emerge to once again push all of our heroes to their limits.","poster_url":"http:\/\/xxx.test\/images\/seasons\/y9Q90gjBX820NZw59O8HWlkZOek.jpg?w=320","number_of_episodes":23,"air_date":"2014-10-07T00:00:00+00:00","total_views":0},"links":{"self":"http:\/\/xxx.test\/api\/seasons\/545c68d0-d25d-4f0f-96d6-11824c9976c4"}}],"meta":{"version":1}}

The part I need is:

"folder_path":"/home/xxx/xxx/public/downloads/episodes/series/The Curse of Oak Island/The Curse of Oak Island - Season 01/The Curse of Oak Island - S01E01.mp4"

My .vue file looks like this

<template>
    <div class="hello">

    </div>
</template>

<script>
export default {
  name: 'hello',
    actions: {
      episode_folder(context, payload){
         // GET /api/episodes/{id}
         axios.get(payload.url).then((response) => {
               console.log(response.folder_path);
         });
      }
    }
}
</script>

So fare nothin is printed in the console I am also not even sure how to use {id} in my payload.url

I am probably missing something obvious but right now I am stuck.

actions are meant to be in vuex vuex.vuejs.org/guide/actions.html now you have an actions key in your component. You should dispatch your action from your component in your component mounted() hook for example vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks. Or just don't use vuex and place your axios call in your mounted hook or something. — user3791775
– user3791775, Commented Apr 30, 2020 at 21:54
Do you get valid response by checking console.log(response)? — Tpojka
– Tpojka, Commented Apr 30, 2020 at 22:16

user4258956 · Accepted Answer · 2020-04-30 22:00:16Z

1

Okay, so I did try to answer in a comment but I don't think I'd do you any justice.

1)

I am also not even sure how to use {id} in my payload.url

To use {id} as part of payload.url, do some basic string concatenation:

payload.url.concat(`/${id}`)

2) Your Vuex stuff is in the wrong place 🙈

This stuff should be as part of a store.js (or ideally a Vuex module but let's not get too far ahead of ourselves). This is what your store.js should look like:

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {},
    actions: {
        episode_folder(context, payload){
         // GET /api/episodes/{id}
         axios.get(payload.url).then((response) => {
             // Deal with successful payload by calling a mutation
         }).catch(err => console.log(err));
      }
    },
    mutations: {}
});

export default store;

3) Your access the wrong object to get your data from the API reponse So, Axios encapsulates an api response inside a data object so you'd want to do response.data.attributes.folder_path

4) Calling your action from Vuex

Okay, this is the simple bit. In the mounted hook for your component, just call

this.$store.dispatch('episode_folder', {
    url: 'https://example.com',
    id: '1602ff28-fd57-473a-9583-1322ff8fd383'
})

5) Further reading Vuex is very big and this answer would get really long to the point you'll end up closing the window 😂. I'd highly recommend reading further about Vuex

answered Apr 30, 2020 at 22:00

user4258956

Sign up to request clarification or add additional context in comments.

1 Comment

Patrick Simard Over a year ago

Looks like I am using modules in my code. I created a new JS file called player.js and added the code you gave to it. In store.js I added player to the module list. In my routes.js file i added { path: '/shows/player/:id', component: PlayerScreen } so thats probably how the ID will be retreived from the payload. But I don't understand where in my vue file I need to put the this.$store.dispatch code.

Collectives™ on Stack Overflow

Vuex retrieve data from laravel

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related