NuxtServerInit не работает в режиме модуля Vuex - Nuxt.js - PullRequest
Новая
       32

NuxtServerInit не работает в режиме модуля Vuex - Nuxt.js

0 голосов
/ 28 февраля 2019

NuxtServerInit не работает при начальном рендеринге страницы в режиме модуля nuxt js vuex.Но это работает в классическом режиме.Следующий код является потоком, который я использовал.

Мой вызов API

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>

Я делаю это неправильно?: / Я хочу знать правильный способ реализации этого.

Редактировать: Как я поступил с ответом Альдарунда (Это может кому-то помочь)

Отредактированный магазин / 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);
    },
};

Добавлен store / index.js 

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

export default {
    actions
}

Ответы [ 2 ]

0 голосов
/ 29 мая 2019

попробуйте использовать этот код, очистите файл index.js и запустите .. на консоли сервера вы увидите сообщение. 

     export const actions = {

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

возможно также можете попробовать nuxt.config.js 

module.exports = {
  //mode: 'spa',
  mode: 'universal',
0 голосов
/ 28 февраля 2019

Как сказано в документах

Если вы используете режим Модули хранилища Vuex, только первичный модуль (в store / index.js) получит этодействие.Оттуда вам нужно будет связать действия вашего модуля.

Поэтому вам нужно поместить nuxtServerInit в store / index.js

...