Vuex извлекает данные из laravel

Question

Я новичок в vue / vuex. В настоящее время я работаю над проектом laravel, который был установлен для передней части, и я бьюсь головой, пытаясь понять, как все это работает.

Мне нужно получить путь_папки эпизода. URL моего API выглядит так:

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

1602ff28-fd57-473a-9583-1322ff8fd383 - это 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}}

Часть, в которой я нуждаюсь:

"folder_path": "/ home / xxx / xxx / public / downloads / серии / серия / Проклятие острова дуба / Проклятие дуба Остров - Сезон 01 / Проклятие Оук-Айленда - S01E01.mp4 "

My. vue Файл выглядит следующим образом

<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>

Так что ничего не напечатано в консоли Я также даже не уверен, как использовать {id} в моем payload.url

Возможно, мне не хватает чего-то очевидного, но сейчас я застрял.

Answer 1

Хорошо, поэтому я попытался ответить в комментарии, но я не думаю, что я бы сделал вам какую-либо справедливость.

1)

Я тоже даже не знаете, как использовать {id} в моем payload.url

Чтобы использовать {id} как часть payload.url, выполните несколько базовых c конкатенации строк:

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

2) Ваш материал Vuex находится не в том месте. ?

Этот материал должен быть частью магазина. js (или, в идеале, модуль Vuex, но давайте не будем слишком забегать вперед). Вот как должен выглядеть ваш магазин. js должен выглядеть следующим образом:

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) Ваш доступ к неверному объекту для получения ваших данных от ответа API Итак, Ax ios инкапсулирует ответ API внутри data объект, который вы хотите сделать response.data.attributes.folder_path

4) Вызов вашего действия из Vuex

Хорошо, это простой бит. В подключенном хуке для вашего компонента просто позвоните

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

5) Дальнейшее чтение Vuex очень большое, и этот ответ будет очень длинным, и в итоге вы закроете окно ?. Я настоятельно рекомендую прочитать далее о Vuex