What is the optimal location for storing component fetch logic?

Question

What is the optimal location for storing component fetch logic?

When should I make a REST request to retrieve data for a Vue component called Page, specifically for the properties title and content? Also, where is the best place to handle this logic?

Currently, I am trying to fetch the data on the component's ready hook, but it seems like this function is never being executed:

<template>
    <b-container class="bv-example-row">
        <h1>{{title}}</h1>

        <b-row>
            <b-col>
                {{content}}
            </b-col>
        </b-row>
    </b-container>
</template>

<script>
import api from '../../api'

export default {
    data() {
        return {
            id: '',
            slug: '',
            title: '',
            content: ''
        };
    },

    ready() {
        console.log('foo');
        this.fetchData();
    },

    methods: {
        fetchData() {
            api.getPageBySlug('sample-page', page => {
                this.$set('title', page.title);
                this.$set('content', page.content);
            });
        }
    }
};
</script>

javascript vue.js vuejs2

Answer 1

Answer №1

Vue.js 2 does not have a ready() hook available.

If you need to include Ajax code, you can place it in various lifecycle hooks. The commonly used ones are listed in the lifecycle hooks documentation:

beforeCreate()
created()
beforeMount()
mounted().

There are certain considerations that should guide your decision on which hook to use.

First: Vue's initialization code runs synchronously.

This means that any asynchronous code executed in these hooks will only complete after all the initial hooks have finished. For example, if you make an Ajax call in the beforeCreate hook, the response will be processed after the created() hook has been executed.

Determining the Suitable Hook to Use

Need to trigger a call as soon as possible?
- Use beforeCreate()
- Why?
  - This hook runs before any other hooks, allowing for immediate execution of code.
Need to read from or modify data right away?
- Use created()
- Why?
  - Data is initialized between beforeCreate() and created(), so any data assignments before created() would be lost.
Require functionality generated post-created()?
- Use beforeMount()
- Why?
  - There are rare cases where additional features become accessible at beforeMount(). One such instance is the compiled render function this.$options.render.
Need access to DOM elements (e.g., ref)?
- Utilize mounted()
- Why? These are only available once the component has been mounted.

Using Vuex for Global State Management

If you are leveraging Vuex to maintain global state, initiate requests within Vuex actions. From there, components can dispatch actions as needed in any lifecycle hook or method. Refer to the demonstration below for illustration.

// Vuex store setup
const store = new Vuex.Store({
strict: true,
  state: {
    people: []
  },
  mutations: {
    populate: function (state, newPeople) {
      state.people = newPeople
    }
  },
  actions: {
    fetchPeople ({ commit }) {
      axios.get('https://reqres.in/api/users').then(function (response) {
        commit('populate', response.data.data)
      }, function () {
        console.log('error')
      })
    }
  }
});

// Vue Component
Vue.component('mycomp', {
  computed: Vuex.mapState(['people']),
  template: `
    <ul>
      <li v-for="p in people">
      {{ p.first_name }} {{ p.last_name }}
      </li>
    </ul>
  `
});

new Vue({
  // Link to Vuex store
  store,
  el: '#app',
  created() {
    this.$store.dispatch('fetchPeople'); // Dispatch Vuex action
  },
  computed: Vuex.mapState(['people']),
})

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="app">
  In parent:
  <ul>
    <li v-for="p in people">
      {{ p.first_name }} {{ p.last_name }}
    </li>
  </ul>
  <hr>
  In custom component (data fetched once):
  <mycomp></mycomp>
</div>

Answer 2

Vue.js 2 does not have a ready() hook available.

If you need to include Ajax code, you can place it in various lifecycle hooks. The commonly used ones are listed in the lifecycle hooks documentation:

beforeCreate()
created()
beforeMount()
mounted().

There are certain considerations that should guide your decision on which hook to use.

First: Vue's initialization code runs synchronously.

This means that any asynchronous code executed in these hooks will only complete after all the initial hooks have finished. For example, if you make an Ajax call in the beforeCreate hook, the response will be processed after the created() hook has been executed.

Determining the Suitable Hook to Use

Need to trigger a call as soon as possible?
- Use beforeCreate()
- Why?
  - This hook runs before any other hooks, allowing for immediate execution of code.
Need to read from or modify data right away?
- Use created()
- Why?
  - Data is initialized between beforeCreate() and created(), so any data assignments before created() would be lost.
Require functionality generated post-created()?
- Use beforeMount()
- Why?
  - There are rare cases where additional features become accessible at beforeMount(). One such instance is the compiled render function this.$options.render.
Need access to DOM elements (e.g., ref)?
- Utilize mounted()
- Why? These are only available once the component has been mounted.

Using Vuex for Global State Management

If you are leveraging Vuex to maintain global state, initiate requests within Vuex actions. From there, components can dispatch actions as needed in any lifecycle hook or method. Refer to the demonstration below for illustration.

// Vuex store setup
const store = new Vuex.Store({
strict: true,
  state: {
    people: []
  },
  mutations: {
    populate: function (state, newPeople) {
      state.people = newPeople
    }
  },
  actions: {
    fetchPeople ({ commit }) {
      axios.get('https://reqres.in/api/users').then(function (response) {
        commit('populate', response.data.data)
      }, function () {
        console.log('error')
      })
    }
  }
});

// Vue Component
Vue.component('mycomp', {
  computed: Vuex.mapState(['people']),
  template: `
    <ul>
      <li v-for="p in people">
      {{ p.first_name }} {{ p.last_name }}
      </li>
    </ul>
  `
});

new Vue({
  // Link to Vuex store
  store,
  el: '#app',
  created() {
    this.$store.dispatch('fetchPeople'); // Dispatch Vuex action
  },
  computed: Vuex.mapState(['people']),
})

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="app">
  In parent:
  <ul>
    <li v-for="p in people">
      {{ p.first_name }} {{ p.last_name }}
    </li>
  </ul>
  <hr>
  In custom component (data fetched once):
  <mycomp></mycomp>
</div>

What is the optimal location for storing component fetch logic?

Answer №1

Determining the Suitable Hook to Use

Using Vuex for Global State Management

Similar questions

Javascript's callback mechanism allows functions to be passed as arguments

Issues with Mocha's beforeEach() and done() functions not functioning as expected

When using `defineModel` in Vue, the returned value can be either an object or

The FileReader encountered an error because the first parameter is not a 'Blob' type

Utilizing dropzone.js in a Vue application to trigger a function with the name of the uploaded image

Tips for transferring canvas information from JavaScript to Django using Ajax

NodeJS sqs-consumer continuously triggers the function to execute

Error: Property 'blogCategory' is unreadable because it is undefined

Launch a YouTube video within a sleek and stylish Bootstrap modal popup

Tallying the Number of Accordion Toggle Clicks

Techniques, modules and functions in Javascript

I'm wondering if there is a method for me to get only the count of input fields that have the class "Calctime" and are not empty when this function is executed

Having difficulty integrating plugins like Lighthouse into my Cypress project

Creating a unique directive specifically designed to be used within an ng

Missing ghost image appears when you drag and drop the file

WordPress now features the ability to toggle both parent menu items when clicked, providing a more streamlined user experience

What could be the issue causing Vue to not start up properly?

Retrieve items from the parent row of selected checkboxes

Refresh numerous HTML <div>'s using data from a JSON object

The latest error in the Next.js 13 app directory: React child is not valid (detected: [object Promise])