NuxtServerInit 不适用于 Vuex 模块模式 - Nuxt.js [英] NuxtServerInit not working on Vuex module mode - Nuxt.js
问题描述
NuxtServerInit 在 nuxt js vuex 模块模式下无法处理初始页面渲染.但它适用于经典模式.以下代码是我使用的流程.
我的api调用
api/CategoryApi.js
从'axios'导入axios；常量头 = {接受:'应用程序/json'};导出默认{getCategory(有效载荷){return axios.get(`${process.env.apiUrl}/category`, {有效载荷，标题:标题});}}store/modules/CategoryStore.js
从'~/api/CategoryApi'导入apiconst state = () =>({类别:[]});const 吸气剂 = {所有类别:状态 =>状态.类别};常量动作 = {异步 nuxtServerInit({commit}) {常量有效载荷 = {每页:6，页数:1};const response = await api.getCategory(payload);commit('setCategories', response.data.data);},};常量突变 = {setCategories:(状态，数据)=>{state.categories = 数据；}};导出默认{状态，吸气剂，行动，突变}页面/index.vue
<div><v-flex xs6 sm4 md2 class="text-xs-center my-2 pa-2" v-for="category in allCategories" :key="category.id">{{ 分类名称 }}</v-flex><脚本>从 'vuex' 导入 { mapGetters };导出默认{布局:'默认'，计算:{...mapGetters({allCategories: 'modules/CategoryStore/allCategories',})},}
我这样做错了吗?:/我想知道实现这一点的正确方法.
我如何处理 Aldarund 答案(这可能对某人有所帮助)
编辑 store/modules/CategoryStore.js
const 动作 = {异步 fetchCategories({commit}) {常量有效载荷 = {每页:6，页数:1};const response = await api.getCategory(payload);commit('setCategories', response.data.data);},};添加了 store/index.js
const 动作 = {异步 nuxtServerInit({dispatch}) {await dispatch('modules/CategoryStore/fetchCategories');},};导出默认{行动}如果你使用的是 Vuex 商店的 Modules 模式，则只有主模块(在 store/index.js 中)将接收此操作.你需要从那里链接您的模块操作.
所以你需要将你的 nuxtServerInit 放入 store/index.js
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
}
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
这篇关于NuxtServerInit 不适用于 Vuex 模块模式 - Nuxt.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
