Nuxt Vuex Store - 模块化方法的问题答案

【问题标题】：Nuxt Vuex Store - issues with modular approachNuxt Vuex Store - 模块化方法的问题
【发布时间】：2019-07-16 18:19:06
【问题描述】：

我在 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.js vuejs2 axios vuex nuxt.js

【解决方案1】：

nuxtServerInitAction 只能在主模块中定义。

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

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

【讨论】：

如果你想在这个动作中调用另一个模块的突变，像这样：commit("NAME_OF_THE_MODULE/NAME_OF_THE_MUTATION", payload);

【解决方案2】：

对于任何为此苦苦挣扎的人，感谢@EvilArthas 给出的答案，这适用于“store/menuMain.js”文件中的以下内容：

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

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

然后在 'store/index.js' 文件中如下：

import axios from "axios/index";

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

【讨论】：