Vuex 突变通过异步/等待操作更新具有动态属性名称的对象答案

【问题标题】：Vuex mutations updating an object with dynamic property names from async/await actionVuex 突变通过异步/等待操作更新具有动态属性名称的对象
【发布时间】：2019-09-20 19:54:05
【问题描述】：

所以我试图让 Nuxt 查询我的 GQL API 以获取站点菜单。我通过 index.js 存储模块中的 nuxtServerInit 函数来执行此操作。

像这样：

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

从我的menus.js 存储模块调用我的QUERY_MENUS 操作。代码是这样的：

// 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_MENU 中的两个注释行都不能可靠地工作（当未注释时），有时它们工作，有时它们不工作。我猜这与 Nuxt 和 SSR 有关，或者我的 async/await 操作错误？

在此处编写沙盒代码：

代码：https://codesandbox.io/s/j3yjz2wm6y?fontsize=14

预览：https://j3yjz2wm6y.sse.codesandbox.io/

有什么建议吗？谢谢！

【问题讨论】：

太模糊了。它究竟是如何不起作用的？请在codesandbox上创建一个复制品
代码看起来设计精良... _get 是异步的吗？这看起来需要等待......
@Aldarund 对此感到抱歉，我认为它会像我的 async/await 语法一样简单。我现在为你添加了代码框链接。

标签： vue.js vuex nuxt.js vue-apollo

【解决方案1】：

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

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 -> https://codesandbox.io/s/rrrv17oq8m

【讨论】：

谢谢@Alarund！是那个 async nuxtServerInit() 吸引了我！