我是vuevuex的新手。我目前正在做一个laravel projet，已经安装了前端部分，我正在敲打我的头，试图了解所有这些工作。
我需要检索文件夹路径的情节.我的API网址是这样的
http:/xxx.testapiepisodes1602ff28-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": "homexxxxxxpublicdownloadsepisodesseriesThe Curse of Oak IslandThe Curse of Oak Island - Season 01The Curse of Oak Island - 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>
所以在控制台中没有打印出任何内容我也不知道如何在我的payload.url中使用{id}。
我可能错过了一些明显的东西，但现在我被卡住了。
好吧, 我确实尝试着在评论中回答, 但我不认为我会对你有任何的公正.
1)
我也不知道如何在我的payload.url中使用{id}。
要使用 {id} 属于 payload.url，做一些基本的字符串连接。
payload.url.concat(`/${id}`)
2) 你的Vuex的东西放错了地方🙈
这些东西应该作为store.js的一部分（或者最好是Vuex模块，但我们不要太过自以为是）。这就是你的store.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响应中获取数据 所以，Axios将api响应封装在一个叫做 "Axios "的东西里。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