vuex dispatch 2 actions

Hello, am learning nuxt js to build server driven apps and so on, am in a point that i want to dispatch 2 actions to get data from 2 different sources, I don't know how to explain this the right way since am still learning here is my code hope it will make better to understand

async fetch({ store }) {
return await store.dispatch('featuredOnlinegames', 'latestNews')
},
computed: {
...mapState(['featured_onlinegames', 'latest_news'])
},

i want to dispatch an actions featuredOnlinegames and latestNews now with the way am using above it's not working i only get data from the featuredOnlinegames action but the latestNews return empty array

now here is my vuex code

  export default {
    state: () => ({
      featured_onlinegames: [],
      latest_news: []
    }),
    mutations: {
      GET_FEATURED_ONLINEGAMES(state, featured_onlinegames){
          state.featured_onlinegames = featured_onlinegames;
      },
      GET_LATEST_NEWS(state, latest_news){
        state.latest_news = latest_news;
      }
    },
    actions: {
      async featuredOnlinegames({commit}) {
        await this.$axios.get('/api/featured-onlinegames').then(res => {
          commit('GET_FEATURED_ONLINEGAMES', res.data)
        })
      },
      async latestNews({commit}) {
        await this.$axios.get('/api/latest-news').then(res => {
          commit('GET_LATEST_NEWS', res.data);
        });
      }
    }
  }

and one more question i don't know but when i started learning nuxt because everybody keep saying that nuxt is SEO friendly but with all these http request i have to send to get data from my db don't that kills the website and just add more weight to it and slow it down? right now am building a website and am still working on the top section of the website and i already have 4 http request to get data from db using axios not mentioning the images and the css and more, I have some dought that vue js nuxt is indeed SEO friendly will be more than glad if you helped clarify this for me and thanks a lot

rodrigo.pedra

5 years ago

Best Answer

Level 56

As Vuex actions are wrapped into a Promise, I think you can use Promise.all in your fetch method. Give this a try:

async fetch({ store }) {
    return await Promise.all([
        store.dispatch('featuredOnlinegames'),
        store.dispatch('latestNews')
    ])
},

More info on Promise.all: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

AwadGorg

5 years ago

Level 2

thanks a lot mate this fixed my problem now can you please just tell me sending http request to get data from my db throw api that will slow down the website on the first load right?

rodrigo.pedra

5 years ago

Level 56

It depends.

If the /api/featured-onlinegames and /api/latest-news endpoints return a lot of data, using a regular Laravel view will seem slower as this DB calls will take some time to run and process before sending the rendered page.

If they are very lightweight queries, then rendering a regular Laravel view will seem to be much faster as in one request from browser to server the user has the rendered view with filled data. Whereas on the Vue based approach the browser will need to make at least 4 requests to server: one for the HTML, one for JS, one for /api/featured-onlinegames, and one for /api/latest-news.

I am not advising you too drop your Vue app, as, after it is loaded, it allows for richer interactivity and, depending on how you handle client side navigation, subsequent navigation will be faster.

The decision point should be on how complex is your project and how much interaction it needs.

Please or to participate in this conversation.