Utilizing the fetch() method in Vuex to obtain a restful API

Question

Utilizing the fetch() method in Vuex to obtain a restful API

Struggling to integrate my API data through Vuex, I am in dire need of a reliable guide or perhaps someone who can assist me with this task. Previously, without using Vuex, all my requests functioned flawlessly. However, now I'm unsure about the necessary steps. Here's a glimpse of my code:

data() {
    return {
      testArray: []
    }; 
 methods: {

    getJsonData() {
      fetch(
        "https://app.ticketmaster.com/discovery/v2/events.json?countryCode=" +
          this.countriesDrop +
          "&apikey=xxxxxxxxxxxxxxxxxxxxxxxx",
        {
          method: "GET"
        }
      )
        .then(response => {
          return response.json();
        })
        .then(test => {console.log(this.testArray)
          this.testArray = test._embedded.events;
        })
        .catch(err => {
          console.log(err);
        });
    },
    watch: {
    countriesDrop: function(val) {
         this.getJsonData();
    }
  },

The request also includes an external element that adjusts according to the watcher and user-assigned values. I have successfully set up Vuex and other plugins...I just lack the know-how to proceed. Any precise tutorials, links, or detailed assistance on resolving this basic issue would be greatly appreciated. Thank you!

javascript vue.js vuex

Answer 1

Answer №1

Your code currently does not involve the use of Vuex. It seems like you intend to update the state in such a way that the getJsonData() method is triggered based on the contents of the store.

Here's an example snippet demonstrating how asynchronous operations are handled in a Vuex scenario.

const store = new Vuex.Store({
  state: {
    testArray: []
  },
  mutations: {
    setTestArray(state, data) {
      state.testArray = data
    }
  },
  actions: {
    getJsonData({
      commit
    }, countriesDrop) {
      if (countriesDrop && countriesDrop !== '') {
        fetch(`https://jsonplaceholder.typicode.com/${countriesDrop}`, {
            method: "GET"
          })
          .then(response => {
            return response.json();
          })
          .then(json => {
            commit('setTestArray', json)
          })
          .catch(err => {
            console.log(err);
          });
      }
    }
  }
})

new Vue({
  el: "#app",
  store,
  computed: {
    getDataFromStore() {
      return this.$store.state.testArray
    }
  },
  methods: {
    getData(countriesDrop) {
      this.$store.dispatch('getJsonData', countriesDrop)
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3b5b6a6bb83f0edf2edf1">[email protected]</a>/dist/vuex.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <button @click="getData('todos')">GET TODOS</button>
  <button @click="getData('albums')">GET ALBUMS</button>
  <ol>
    <li v-for="data in getDataFromStore">{{data.title}}</li>
  </ol>
</div>

The essence of incorporating Vuex into your Vue application lies in its centralized role. This enables you to manage the application state, handle both synchronous and asynchronous operations through actions and mutations, and have all components rely on the state as the primary source of truth.

Therefore, incoming input from a component triggers the dispatch of an action available within the Vuex store. If the action necessitates altering the state, a corresponding mutation method is invoked. By following this structured approach, reactivity across components utilizing the shared state is maintained.

In the provided example, I utilized a computed property to access data from the Vuex store, although getters could serve the same purpose.

This architectural design helps in preventing the cluttering of components with functions and data that should ideally reside within the store.

Answer 2

Your code currently does not involve the use of Vuex. It seems like you intend to update the state in such a way that the getJsonData() method is triggered based on the contents of the store.

Here's an example snippet demonstrating how asynchronous operations are handled in a Vuex scenario.

const store = new Vuex.Store({
  state: {
    testArray: []
  },
  mutations: {
    setTestArray(state, data) {
      state.testArray = data
    }
  },
  actions: {
    getJsonData({
      commit
    }, countriesDrop) {
      if (countriesDrop && countriesDrop !== '') {
        fetch(`https://jsonplaceholder.typicode.com/${countriesDrop}`, {
            method: "GET"
          })
          .then(response => {
            return response.json();
          })
          .then(json => {
            commit('setTestArray', json)
          })
          .catch(err => {
            console.log(err);
          });
      }
    }
  }
})

new Vue({
  el: "#app",
  store,
  computed: {
    getDataFromStore() {
      return this.$store.state.testArray
    }
  },
  methods: {
    getData(countriesDrop) {
      this.$store.dispatch('getJsonData', countriesDrop)
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3b5b6a6bb83f0edf2edf1">[email protected]</a>/dist/vuex.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <button @click="getData('todos')">GET TODOS</button>
  <button @click="getData('albums')">GET ALBUMS</button>
  <ol>
    <li v-for="data in getDataFromStore">{{data.title}}</li>
  </ol>
</div>

The essence of incorporating Vuex into your Vue application lies in its centralized role. This enables you to manage the application state, handle both synchronous and asynchronous operations through actions and mutations, and have all components rely on the state as the primary source of truth.

Therefore, incoming input from a component triggers the dispatch of an action available within the Vuex store. If the action necessitates altering the state, a corresponding mutation method is invoked. By following this structured approach, reactivity across components utilizing the shared state is maintained.

In the provided example, I utilized a computed property to access data from the Vuex store, although getters could serve the same purpose.

This architectural design helps in preventing the cluttering of components with functions and data that should ideally reside within the store.

Utilizing the fetch() method in Vuex to obtain a restful API

Answer №1

Similar questions

What is the best way to initiate a change event using JavaScript?

Exploring the world of Restify: Mastering the art of sending POST

The combination of Vue init and Firebase init led to the creation of intricately nested

Error encountered in Angular: FormBuilder provider not found

AngularJS: How to accurately retrieve the offsetTop value upon page initialization

Guide to utilizing AJAX to retrieve a value from a controller and display it in a popup

Issues with jQuery code functionality within web forms

Steps to run a function for updating a JSON data file

Data is not being displayed in the Angular table

Sinon and Chai combination for testing multiple nested functions

Is it possible to directly update the label text in AngularJS from the view itself?

Manipulate component properties using CSS hover in React with Material-UI

Failed to load Gulpfile.js in the Task Runner Explorer of Visual Studio 2019 version 16.6.2

How can I retrieve my array state in a different router page using VUEJS and VUEX?

AngularJS allows a function to return an array value, which can be displayed in separate blocks on

Is there a way for me to receive a success message when I successfully set data in Firebase?

Leveraging external JavaScript libraries in SAPUI5

Having trouble getting a div to slide to the left on hover and collapse on mouseout using Jquery?

Bringing in d3js into Angular 2

The 'slide.bs.carousel' event in Bootstrap carousel is triggered just once