laravel - Vuex 从 laravel 检索数据

Question

我是 vue/vuex 的新手。我目前正在开发一个为前端部分安装的 laravel 项目，我正在努力理解这一切是如何工作的。

我需要检索一集的文件夹路径。我的 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/episodes/series/橡树岛的诅咒/橡树岛的诅咒 - 第 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>

所以票价没有打印在控制台中我什至不知道如何在我的 payload.url 中使用 {id}

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

标签： laravelvue.jsvuex

Answer 1

好的，所以我确实尝试在评论中回答，但我认为我不会为您伸张正义。

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 响应封装在一个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 的信息