Vue.js Vuex从异步/等待操作更新具有动态属性名称的对象

因此，我试图让Nuxt查询我的GQLAPI以获取站点菜单。我是通过

index.js

store模块中的

nuxtServerInit

函数来实现的

像这样：

menuLocations = ["MAIN_MENU", "WORK_MENU"]
store.dispatch("menus/QUERY_MENUS", menuLocations)

它从my

MENUS.js

store模块调用my

QUERY\u菜单

操作。代码如下：

// Define State defaults
export const state = () => ({
    locations: {}
})

// Define mutations
export const mutations = {
    SET_MENU(state, data) {
        //Vue.set(state.locations, data.location, data.items)
        //state.locations = { ...state.locations, [data.location]: data.items }
    }
}

// Define actions
export const actions = {
    async QUERY_MENUS({ commit }, menuLocations) {
        let client = this.app.apolloProvider.defaultClient

        // Get each menu from server
        for (const location of menuLocations) {
            const query = await client.query({
                query: MenuByLocation,
                variables: {
                    location: location
                }
            })

            // Commit menu to store
            commit("SET_MENU", {
                location: _camelCase(location),
                items: _get(query, "data.menuItems.nodes", {})
            })
        }
    }
}

问题是

SET\u菜单

中注释掉的两行都不能可靠地工作（未注释时），有时可以工作，有时不能。我猜这与Nuxt和SSR有关，或者我的异步/等待功能做得不对

这里的代码沙箱：

代码：

预览：

---

有什么建议吗？谢谢

在提供的沙箱中有两个错误：

1） 在nuxtServerInit中没有等待调度

export const actions = {
  async nuxtServerInit(store, context) {
    let menuLocations = ["MAIN_MENU", "OUR_WORK_MENU"];
    await store.dispatch("menus/QUERY_MENUS", menuLocations);
  }
};

2） 在计算属性中，缺少状态引用

  return _get(this, "$store.state.menus.locations.mainMenu", false);

---

这里修复了CBS->

在提供的沙箱中有两个错误：

1） 在nuxtServerInit中没有等待调度

export const actions = {
  async nuxtServerInit(store, context) {
    let menuLocations = ["MAIN_MENU", "OUR_WORK_MENU"];
    await store.dispatch("menus/QUERY_MENUS", menuLocations);
  }
};

2） 在计算属性中，缺少状态引用

  return _get(this, "$store.state.menus.locations.mainMenu", false);

---

这里修正了CBS->

过于模糊的问题。它到底是怎么不起作用的？请在CodeSandbox上创建一个复制。代码看起来是精心编制的。。。

\u get

是异步的吗？这看起来需要等待…@Aldarund对此表示抱歉，我原以为它会像我的async/await语法一样简单。我现在为你添加了代码沙盒链接。太模糊了。它到底是怎么不起作用的？请在CodeSandbox上创建一个复制。代码看起来是精心编制的。。。

\u get

是异步的吗？这看起来需要等待…@Aldarund对此表示抱歉，我原以为它会像我的async/await语法一样简单。我现在为你添加了codesandbox链接。谢谢@Alarund！正是那个异步nuxtServerInit（）让我着迷！谢谢@Alarund！正是那个异步nuxtServerInit（）让我着迷！