What is the best way to properly store an axios request in the Vuex store in Vue.js?

Question

What is the best way to properly store an axios request in the Vuex store in Vue.js?

I am exploring the idea of creating a dynamic sidebar with links fetched from an API. The theme I am currently working with can be found here:

One interesting feature in this theme is the charts link, which displays a list of children in the sidebar.

My goal is to utilize an API request, let's say for charts, and dynamically generate each child element (check out charts.js) for every item returned by the API.

In the code snippet below, you'll notice that the data objects are currently hardcoded. My intention is to eliminate this hardcoding and use a for loop to dynamically create each child based on the elements received in the API request body.

/store/modules/menu/index.js

[Code block for /store/modules/menu/index.js]

/store/modules/menu/charts.js

[Code block for /store/modules/menu/charts.js]

sidebar.vue

[Code block for sidebar.vue]

I seem to be stuck on this implementation. Any tips or guidance would be greatly appreciated.

Update:

Below is an example of the API response I am dealing with:

[
    {
        "id": 1,
        "name": "test1",
        "os": "windows",
        "url": "https://test.com"
    },
    {
        "id": 2,
        "name": "test2",
        "os": "ios",
        "url": "https://test.com"
    },
    {
        "id": 1,
        "name": "test3",
        "os": "windows",
        "url": "https://test.com"
    }
]

javascript vue.js axios

Answer 1

Answer №1

Start by duplicating the routes of charts within the store
```
const state = {
  chartsRoutes: []
}
```

Add a computed property to the component

computed: {
  chartsRoutes () {
    return this.$store.state.chartsRoutes
  }
}

Utilize v-for to display the chartsRoutes as router-links in the component

Develop a mutation to update both the store and router

// Import the router
const mutations = {
  'update-charts-routes': function (state, payload) {
    const { chartsRoutes } = payload
    state.chartsRoutes = chartsRoutes.map(r => {
      return {
        path: '/your/custom/path/according/to/response'
        // other parameters
      }
    })
    router.addRoutes(state.chartsRoutes)
  }
}

Create an action item

const actions = {
  'reload-charts': function ({commit, dispatch}, data) {
    return new Promise((resolve, reject) => {
      const r = {
        method: 'get',
        url: data.url,
        // add more options like headers or authentication
      }
      axios.request(r)
        .then(resp => {
          commit('update-charts-routes', { chartsRoutes: resp.data })
          resolve()
        })
        .catch(err => {
          // handle errors
          reject(err)
        })
      }
    }
  }
}

Trigger the action

this.$store.dispatch('reload-charts', { url: 'http://some.host/path/to/url' })
  .then(() => {
    // perform additional tasks
  })

Answer 2

Start by duplicating the routes of charts within the store
```
const state = {
  chartsRoutes: []
}
```

Add a computed property to the component

computed: {
  chartsRoutes () {
    return this.$store.state.chartsRoutes
  }
}

Utilize v-for to display the chartsRoutes as router-links in the component

Develop a mutation to update both the store and router

// Import the router
const mutations = {
  'update-charts-routes': function (state, payload) {
    const { chartsRoutes } = payload
    state.chartsRoutes = chartsRoutes.map(r => {
      return {
        path: '/your/custom/path/according/to/response'
        // other parameters
      }
    })
    router.addRoutes(state.chartsRoutes)
  }
}

Create an action item

const actions = {
  'reload-charts': function ({commit, dispatch}, data) {
    return new Promise((resolve, reject) => {
      const r = {
        method: 'get',
        url: data.url,
        // add more options like headers or authentication
      }
      axios.request(r)
        .then(resp => {
          commit('update-charts-routes', { chartsRoutes: resp.data })
          resolve()
        })
        .catch(err => {
          // handle errors
          reject(err)
        })
      }
    }
  }
}

Trigger the action

this.$store.dispatch('reload-charts', { url: 'http://some.host/path/to/url' })
  .then(() => {
    // perform additional tasks
  })

What is the best way to properly store an axios request in the Vuex store in Vue.js?

/store/modules/menu/index.js

/store/modules/menu/charts.js

sidebar.vue

Answer №1

Similar questions

Passing props to a wrapped component when utilizing a higher order component in React

Guide to incorporating WebElement scrolling in Selenium using Java?

The JQuery Slide feature seems to be malfunctioning when handling data retrieved from the database

Enhancing mongoose find queries in Node.js with dynamic conditions using both AND and OR operators simultaneously

My goal is to retrieve the first value in the first table cell after successfully logging into

Receiving HTTP POST data using Classic ASP script

Interact with a React dropdown using SeleniumBase

Switching the default image using jQuery upon click event

I've noticed that the NextJs router appears to be significantly slower in comparison to React

What is the process of adding a newly uploaded file to an existing list of files using Vue?

Whenever I try to include something within the `componentWillUnmount` function,

Display the elements of a div at a reduced size of 25% from its original dimensions

I'm encountering an unfamiliar error within my Discord.js bot, and I'm unsure of both its cause and the appropriate solution. Additionally, I'm unsure which specific file

Struggling with updating an array using React's setState

Tips for implementing authentication in Vue.js with Azure Active Directory integration

In a React component, what is the significance of "this" in relation to accessing state values (this.state...)?

Assigning input array values with jQuery

Using JavaScript and jQuery to make calls to the Web API

Delete the file containing Mongoose references

Problem with autocomplete functionality in Angular Material's md-contact-chips