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
}
docs で述べたように
Vuexストアのモジュールモードを使用している場合、プライマリモジュール(store/index.js内)のみがこのアクションを受け取ります。そこからモジュールアクションを連鎖させる必要があります。
したがって、nuxtServerInitをstore /index.jsに配置する必要があります
そのコードを使用して、ファイルindex.jsをクリアし、実行してみてください。サーバーコンソールでメッセージが表示されます。
export const actions = {
nuxtServerInit ({ dispatch }) {
console.log("troololollo")
}
}
多分nuxt.config.jsも試すことができます
module.exports = {
//mode: 'spa',
mode: 'universal',