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

Tips for managing onClick code when a user selects "open link in new tab" within a React js environment

Display the Bootstrap datepicker within an h4 element set to default to today's date, utilizing both Angular and jQuery

Cypress eliminating the "X-CSRFToken" header

Passing parameters to an Angular 2 component

Ways to retrieve the data from promises after they have been resolved?

What is the best way to pass a websocket instance to Vue.js components and then invoke the send() method on it?

Updating $data within a VueJS directiveIs there something else you

Using AJAX to dynamically load content from a Wordpress website

managing the reloading of pages and navigating back and forth in the browser

Encountering an issue with the node.js express server when fetching data

Emulate the selection process using element-ui and vue-test-utils

Loop through each instance of a data record in a JSON document using Vue's v-for directive

Guidelines on centering an AJAX spinning animation within a parent div

Display items in a not predetermined order

The art of transforming properties into boolean values (in-depth)

It is essential for Jquery to properly evaluate the first JSON result, as skipping

What is the best way to create a JSON string using JavaScript/jquery?

Resolve character encoding issues in a JavaScript CSV HTTP response file

Comparing Weex components: <list> versus <recycle-list>

Methods for concealing a single item in a Vue web form