Using Vuex to fetch information from Laravel

Question

Using Vuex to fetch information from Laravel

As a newcomer to the world of vue/vuex, I find myself immersed in a laravel project that utilizes these technologies for its front end. Needless to say, I am struggling to grasp the intricacies of it all.

My current challenge involves retrieving the folder_path of an episode. The API url in question is structured like this

The alphanumeric string "1602ff28-fd57-473a-9583-1322ff8fd383" represents the episode UID

{"data":{"type":"episodes","id":"1602ff28-fd57-473a-9583-1322ff8fd383",...,"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"},... }

I specifically require the following snippet:

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

Within my .vue file, the structure is as follows:

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

Despite following this setup, nothing gets printed to the console. Additionally, I am unsure about how to integrate {id} within my payload.url

There seems to be a crucial piece of information that eludes me at the moment, leaving me temporarily stuck.

laravel vue.js vuex

Answer 1

Answer №1

After attempting to provide an answer in a comment, I realized it wouldn't suffice.

1)

I'm unsure how to properly utilize {id} within my payload.url

If you want to include {id} in your payload.url, you can achieve this through simple string concatenation:

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

2) Your Vuex logic is misplaced 🙈

This code belongs in a store.js file (or ideally a Vuex module but let's not complicate things). Here's an example of how your store.js should be structured:

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) => {
             // Handle successful response by invoking a mutation
         }).catch(err => console.log(err));
      }
    },
    mutations: {}
});

export default store;

3) You're accessing the wrong object to extract data from the API response When using Axios, the response from an API call is encapsulated within a data object. Therefore, you should access the data like so:

response.data.attributes.folder_path

4) Invoking your action from Vuex

To keep it simple, just call your action in the mounted hook of your component like this:

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

5) For further guidance Vuex is quite extensive and delving deeper into it here would make this answer never-ending 😂. I highly recommend exploring more about Vuex

Answer 2

After attempting to provide an answer in a comment, I realized it wouldn't suffice.

1)

I'm unsure how to properly utilize {id} within my payload.url

If you want to include {id} in your payload.url, you can achieve this through simple string concatenation:

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

2) Your Vuex logic is misplaced 🙈

This code belongs in a store.js file (or ideally a Vuex module but let's not complicate things). Here's an example of how your store.js should be structured:

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) => {
             // Handle successful response by invoking a mutation
         }).catch(err => console.log(err));
      }
    },
    mutations: {}
});

export default store;

3) You're accessing the wrong object to extract data from the API response When using Axios, the response from an API call is encapsulated within a data object. Therefore, you should access the data like so:

response.data.attributes.folder_path

4) Invoking your action from Vuex

To keep it simple, just call your action in the mounted hook of your component like this:

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

5) For further guidance Vuex is quite extensive and delving deeper into it here would make this answer never-ending 😂. I highly recommend exploring more about Vuex

Using Vuex to fetch information from Laravel

Answer №1

Similar questions

Tips for avoiding the push method from replacing my items within an array?

Send JSON information to a Spring Boot server application

Exploring the option of integrating Vuetify snackbar as a universal custom component in Vue.js

Using Laravel allows for the implementation of a personalized validation message

Tips for cutting down on bundle size in your WEBPACK setup when using VUEJS

How to dynamically order components in Vue?

Navigating in Vue Router without triggering the next() function

Is the inclusion of @vue/composition-api in devDependencies warranted?

Tips for establishing a connection between two articulate models

What are the reasons for being unable to access the HTML canvas in Vue?

The v-autocomplete component's watcher is not functioning as intended

Retrieve the data of the current component from the slot template

What causes the Element to be null in Vue.js?

What is the best way to divide my Vue.js project into separate sections for development and testing purposes?

Issue with Nuxt: Module needs to export a function: @turfhelpers [ERROR]

Tips on extracting only abstract JSON data from an API response?

Encountering a Troubleshooting Issue with ArcGIS JS API 4.7 and N

Encountering a Laravel error related to "SymfonyComponentHttpKernelExceptionHttpException"

Is there a way for me to showcase the latitude and longitude retrieved from JSON data on a Google Map using modals for each search result in Vue.js?

What is the function of the # symbol within a <template> in the context of v-data-table in Vue JS?