NuxtServerInit not working on Vuex module mode - Nuxt.js

Question

NuxtServerInit is not working on initial page render on nuxt js vuex module mode. But it works on Classic mode. Following code is the flow I used.

My api call

api/CategoryApi.js

import axios from 'axios';

const HEADERS = {
    Accept: 'application/json'
};

export default {
    getCategory(payload) {
        return axios.get(`${process.env.apiUrl}/category`, {
            payload,
            headers: HEADERS
        });
    }
}

store/modules/CategoryStore.js

import api from '~/api/CategoryApi'

const state = () => ({
    categories: []
});

const getters = {
    allCategories: state => state.categories
};

const actions = {
    async nuxtServerInit({commit}) {
        const payload = {
            per_page: 6,
            page: 1
        };
        const response = await api.getCategory(payload);
        commit('setCategories', response.data.data);
    },
};

const mutations = {
    setCategories: (state, data) => {
        state.categories = data;
    }
};

export default {
    state,
    getters,
    actions,
    mutations
}

pages/index.vue

<template>
    <div>
        <v-flex xs6 sm4 md2 class="text-xs-center my-2 pa-2" v-for="category in allCategories" :key="category.id">
            {{ category.name }}
        </v-flex>
    </div>
</template>

<script>
    import { mapGetters } from 'vuex';

    export default {
        layout: 'default',
        computed: {
            ...mapGetters({
                allCategories: 'modules/CategoryStore/allCategories',
            })
        },
    }
</script>

Am I doing this wrong? :/ I want to know the right way to implement this.

Edit: How I did with Aldarund answer (This might help someone)

Edited store/modules/CategoryStore.js

const actions = {
    async fetchCategories({commit}) {
        const payload = {
            per_page: 6,
            page: 1
        };
        const response = await api.getCategory(payload);
        commit('setCategories', response.data.data);
    },
};

Added store/index.js

const actions = {
    async nuxtServerInit({dispatch}) {
        await dispatch('modules/CategoryStore/fetchCategories');
    },
};

export default {
    actions
}

Solution 1

As said in the docs

If you are using the Modules mode of the Vuex store, only the primary module (in store/index.js) will receive this action. You'll need to chain your module actions from there.

So you need to place your nuxtServerInit into store/index.js

Solution 2

try use that code, clear file index.js, and run.. on server console you see message.

     export const actions = {

  nuxtServerInit ({ dispatch }) {
    console.log("troololollo")
  }
}

maybe also can try nuxt.config.js

module.exports = {
  //mode: 'spa',
  mode: 'universal',

Solution 3

It's not true that you can only call nuxtServerInit from within store/index.js

I think what confused me most was the difference between the modular approach and only having a single store file. In the latter approach, I would do something like:

nuxtServerInit(vuexContext, {req, redirect, params})
    {
      vuexContext.dispatch('someAction',someArguments)
    }

Whereas when calling in a module, for example store/modules/auth.js, you cannot use the vuexContext, but instead use dispatch directly:

nuxtServerInit({dispatch})
        {
          dispatch('someAction',someArguments)
        }

This worked for me, hope it helps

Comments

[Ninja]

Can you please give an example of how to do that.

[Aldarund]

@Ninja it is in docs and in examples. github.com/nuxt/nuxt.js/blob/…

[Ninja]

Yes but my Vuex is in Module mode. So Kind of confused.

[Aldarund]

@Ninja the example i linked in module mode too

[Keylan]

@Aldarund Not sure if your example changed, but it does not appear to be in module mode?

[tbone]

mode: spa won't make the nuxtServerInit call. I learned this the hard way. Thank you for this comment.

[LShapz]

hey Andre, when you just want to indicate that it's code, you can use the "pre-code" formatting ({} icon) instead of the executable snippet formatting (<> icon).

[Morgan Koh]

About your new Promise with async and await. It's actually not recommended by ESLint. eslint.org/docs/rules/no-async-promise-executor