9
votes

NuxtServerInit ne fonctionne pas en mode module Vuex - Nuxt.js

NuxtServerInit ne fonctionne pas sur le rendu initial de la page en mode module nuxt js vuex. Mais cela fonctionne en mode classique. Le code suivant est le flux que j'ai utilisé.

Mon appel api

api / CategoryApi.js

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

export default {
    actions
}

store / modules / CategoryStore.js p>

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

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>

Est-ce que je fais ça mal? : / Je veux savoir la bonne façon de mettre en œuvre cela.

Edit: Comment j'ai fait avec Aldarund answer (Cela pourrait aider quelqu'un)

Boutique modifiée /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
}

Ajout du magasin / index.js

import axios from 'axios';

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

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

vue.js nuxt.js vuex vuex-modules

0 commentaires

3 Réponses :

13
votes

Comme indiqué dans la documentation

Si vous utilisez le mode Modules du magasin Vuex, seul le module (dans store / index.js) recevra cette action. Vous devrez enchaînez les actions de votre module à partir de là.

Vous devez donc placer votre nuxtServerInit dans store / index.js

5 commentaires

Pouvez-vous s'il vous plaît donner un exemple de la façon de procéder.

@Ninja c'est dans la documentation et dans les exemples. githubux.com/tnuxt/noreferrer"> githubux.com/t. js / blob /…

Oui mais ma Vuex est en mode Module. Donc un peu confus.

@Ninja l'exemple que j'ai lié en mode module aussi

@Aldarund Vous ne savez pas si votre exemple a changé, mais il ne semble pas être en mode module?

3
votes

essayez d'utiliser ce code, effacez le fichier index.js et exécutez .. sur la console du serveur, vous voyez un message.

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

peut-être aussi essayer nuxt.config.js

XXX

1 commentaires

mode: spa ne fera pas l'appel nuxtServerInit. Je l'ai appris à la dure. Merci pour ce commentaire.

1
votes

Ce n'est pas vrai que vous ne pouvez appeler nuxtServerInit qu'à partir de store / index.js

Je pense que ce qui m'a le plus dérouté était la différence entre l'approche modulaire et le fait de n'avoir qu'un seul fichier de stockage. Dans cette dernière approche, je ferais quelque chose comme:

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

Alors que lorsque vous appelez un module, par exemple store / modules / auth.js, vous ne pouvez pas utiliser vuexContext, mais à la place utiliser directement dispatch:

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

Cela a fonctionné pour moi, j'espère que cela aide

1 commentaires

hé André, quand vous voulez juste indiquer que c'est du code, vous pouvez utiliser le formatage "pré-code" (icône {}) au lieu du formatage d'extrait de code exécutable (icône <>).