Question

我在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”以外，我都没有在文件中设置“操作”对象，所以我想知道这是否是问题所在。

该站点中使用的Vue版本是2.6.10。

Answer 1

nuxtServerInitAction只能在主模块中定义。

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

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

Answer 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);
        })
    }
};

Nuxt Vuex商店-模块化方法存在问题

2 个答案: