Мутации Vuex, обновляющие объект с динамическими именами свойств из действия async / await

Итак, я пытаюсь заставить Nuxt запрашивать мой GQL API для меню сайта. Я делаю это с помощью функции nuxtServerInit в моем модуле хранилища index.js.

Вот так:

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

Это вызывает мое действие QUERY_MENUS из модуля хранилища menus.js. Код для этого такой:

// 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/

Какие-либо предложения? Спасибо!


vue.js nuxt.js vuex vue-apollo
person Drew Baker    schedule 02.05.2019    source источник
comment
слишком расплывчато. Как именно это не работает? Пожалуйста, создайте репродукцию на codeandbox   -  person Aldarund    schedule 02.05.2019
comment
Код выглядит хорошо написанным ... Является ли _get асинхронным? Похоже, этого нужно подождать ...   -  person Steven Spungin    schedule 02.05.2019
comment
@Aldarund извините за это, я подумал, что это будет что-то простое, вроде моего синтаксиса async / await. Я добавил для вас ссылку codeandbox.   -  person Drew Baker    schedule 02.05.2019

Ответы (1)


arrow_upward
0
arrow_downward

В предоставленной песочнице две ошибки:

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

person Aldarund    schedule 02.05.2019
comment
Спасибо @Alarund! Меня достал async nuxtServerInit ()! - person Drew Baker; 03.05.2019