时间戳

首页 > 解决方案 > Nuxt Vuex Store - 模块化方法的问题

vue.js - Nuxt Vuex Store - 模块化方法的问题

问题描述

我在 Nuxt 中建立了一个站点，并通过 WordPress API 将一组菜单项拉入 Vuex 商店。我目前正在使用即将弃用的经典模式，因此我想将其更新为此处提到的“模块”模式：https ://nuxtjs.org/guide/vuex-store/ 。我在 store/index.js 中有以下代码：

export const state = () => ({
    menuMain: null
});

export const mutations = {
    mutateMainMenu(state, data)
    {
        state.menuMain = data
    }
};

import axios from "axios/index";

export const actions = {
    async nuxtServerInit ({ commit }) {
        const response = await axios.get('http://myapi.com/wp-json/wp/v2/pages')
        commit('mutateMainMenu', response.data)
    }
};

我希望这是将下面的代码移动到“store/menuMain.js”的情况：

import axios from "axios/index";

export const actions = {
    async nuxtServerInit ({ commit }) {
    const response = await axios.get('http://myapi.com/wp-json/wp/v2/pages')
        commit('mutateMainMenu', response.data)
    }
};

但是，这似乎不起作用。有没有人有任何想法？在任何示例中，我都没有看到在“store/index.js”以外的文件中设置了“actions”对象，所以我想知道这是否是问题所在。

本站使用的 Vue 版本为 2.6.10。

标签： vue.jsvuejs2axiosvuexnuxt.js

解决方案

nuxtServerInitAction只能在主模块中定义。

如果您使用 Vuex 商店的 Modules 模式，则只有主模块（在 store/index.js 中）会收到此操作。您需要从那里链接您的模块操作。

https://nuxtjs.org/guide/vuex-store#the-nuxtserverinit-action

推荐阅读