Vuex从laravel检索数据

我是vue/vuex的新手。我目前正在开发一款laravel projet，它安装在前端部件上，我正在绞尽脑汁试图了解这一切是如何工作的

我需要检索一集的文件夹路径。 我的API url如下所示

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

1602ff28-fd57-473a-9583-1322ff8fd383是本集的主要内容

{"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}}

我需要的是：

“文件夹路径”：“/home/xxx/xxx/public/downloads/scents/series/The 橡树岛的诅咒/橡树岛的诅咒-第1季/森林的诅咒 橡树岛-S01E01.mp4“

我的.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>

导出默认值{
姓名：'你好'，
行动：{
事件_文件夹（上下文、有效负载）{
//获取/api/scents/{id}
get（payload.url）。然后（（响应）=>{
console.log（response.folder_路径）；
});
}
}
}

所以控制台上没有显示任何内容 我甚至不知道如何在我的payload.url中使用{id}

---

我可能错过了一些明显的东西，但现在我被卡住了。

好吧，所以我试着在评论中回答，但我不认为我会公正地对待你

(一)

我甚至不知道如何在我的payload.url中使用{id}

要将

{id}

用作

有效负载.url

的一部分，请执行一些基本的字符串连接：

payload.url.concat（`/${id}`）

---

2） Vuex的东西放错了位置动作应该放在Vuex中现在组件中有了动作键。例如，您应该在component mounted（）钩子中从组件分派操作。或者干脆不要使用vuex，将axios调用放在挂载的钩子或其他东西中。通过检查

console.log（response）

，您是否得到了有效的响应？看起来我在代码中使用了模块。我创建了一个名为player.JS的新JS文件，并添加了您提供的代码。在store.js中，我将播放器添加到模块列表中。在我的routes.js文件中，我添加了{path:'/shows/player/:id'，component:PlayerScreen}，因此这可能就是从负载中检索id的方式。但我不明白我需要将this.$store.dispatch代码放在vue文件的何处。