Nuxt.js: Problem: Vuex actions, dispatch from page

[miecio1212]

Hey, I've got problem with Vuex and fetch data.
When i click to change route from menu it works but when i refresh page "f5" then it doesn't.
But when I add console.logs I see that it works in terminal but I see that store is filled but I don't see it in browser.
I do something like this

in index.vue
<script>
  export default {
    asyncData ({store}) {
      store.dispatch('GET_CATEGORIES')
    },
    computed: {
      categories () {
        return this.$store.state.categories
      },
      category () {
        return this.$route.params.category
      }
    }
  }
</script>

in store/index.js
export const state = () => ({  
  categories: []
})

export const mutations = { 
  SET_CATEGORIES (state, categories) {
    state.categories = categories
  }
}

export const actions = {
  async GET_CATEGORIES ({commit}) {
    const categories = await this.$axios.$get('http://icanhazip.com')
    commit('SET_CATEGORIES', categories)
  }
}

_{This question is available on Nuxt.js community (#c1517)}

[miecio1212]

it's so weird
I found solution but I don't undestand it

    async asyncData ({store}) {
      await store.dispatch('GET_CATEGORIES')
    },

I changed it to this in index.vue and I don't get it why it works now can somebody explain ?

[rAugustos]

+1

[adamorlowskipoland]

+2

[vuchl]

@miecio1212 what's your nodejs version?

[miecio1212]

6.11.3

[vuchl]

I think 6 does not have async functions. so you need to specify the async keyword so babel can transform it.

So either mark them async or use Node 8+ to be sure.

[miecio1212]

@vuchl read one more time :D It is working after this change with async and awiat it wasn't working without it and I don't get it why

[vuchl]

yes. asyncData is an async function. Node 8 can handle this without explicitly declaring the method as async. In Node 6 you need the async and await keywords so the runtime can work with it.

[miecio1212]

Can you explain it more precisely? I don't feel like you understand me .

[alexchopin]

Hi,
As explain in the documentation you should use fetch() to dispatch Vuex actions in pages.

The fetch method is used to fill the store before rendering the page, it's like the asyncData method except it doesn't set the component data.

[Atinux]

Hi @miecio1212

Actually, it works with node 6 too since every vue files supports async/await.

As describe in the documentation, you need to returns a Promise to tell Nuxt to wait for it to be resolved before setting the component data.

This will work:

asyncData ({store}) {
   // GET_CATEGORIES action returns a Promise since it's defined as an async function
   return store.dispatch('GET_CATEGORIES')
}

But since it does not return any data, you should use fetch for this as @alexchopin said:

fetch ({store}) {
   // GET_CATEGORIES action returns a Promise since it's defined as an async function
   return store.dispatch('GET_CATEGORIES')
},

By setting async before writing function, it will automatically return a Promise, I suggest you to read some articles about async/await :)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.