web-dev-qa-db-ja.com

NuxtServerInitがVuexモジュールモードで機能しない-Nuxt.js

NuxtServerInitは、nuxt jsvuexモジュールモードでの初期ページレンダリングでは機能しません。ただし、クラシックモードでは機能します。次のコードは私が使用したフローです。

私の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>

私はこれを間違っていますか？ ：/これを実装する正しい方法を知りたいです。

編集：Aldarundの回答でどのようにしたか（これは誰かを助けるかもしれません）

編集されたストア/モジュール/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
}
vue.jsvuexnuxt.jsvuex-modules
3
Mànìkàndàn

docs で述べたように

Vuexストアのモジュールモードを使用している場合、プライマリモジュール（store/index.js内）のみがこのアクションを受け取ります。そこからモジュールアクションを連鎖させる必要があります。

したがって、nuxtServerInitをstore /index.jsに配置する必要があります

6
Aldarund

そのコードを使用して、ファイルindex.jsをクリアし、実行してみてください。サーバーコンソールでメッセージが表示されます。

     export const actions = {

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

多分nuxt.config.jsも試すことができます

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