vue.js - NuxtServerInit 在 Vuex 模块模式下不起作用 - Nuxt.js
问题描述
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
});
}
}
商店/模块/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
}
页面/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 的回答如何(这可能对某人有所帮助)
编辑了 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);
},
};
添加了 store/index.js
const actions = {
async nuxtServerInit({dispatch}) {
await dispatch('modules/CategoryStore/fetchCategories');
},
};
export default {
actions
}
解决方案
如果您使用 Vuex 商店的 Modules 模式,则只有主模块(在 store/index.js 中)会收到此操作。您需要从那里链接您的模块操作。
所以你需要将你的 nuxtServerInit 放入 store/index.js
推荐阅读
- javascript - React 功能组件 useEffect 挂钩,在类组件生命周期中具有相等的依赖关系
- python - 查找字符的运行长度编码适用于大多数测试用例,除了一个
- c# - 所选项目不返回值 asp.net MVC
- javascript - fs.createreadstream 中是否有类似“结束”的“开始”?
- css - 同一列中的 Django/CSS 图标和表单输入
- javascript - Flask 和 Javascript 之间的数据交换
- node.js - nodemon 应用程序崩溃 - 在开始之前等待文件更改... nodejs-question
- android - 如何使用 tensorflow lite 在活动对象周围创建边界框
- flutter - 如何从 Flutter 中的模型类创建 GridView
- python - 连续变量的贝叶斯网络