Заставить шаблон Vue ждать глобального объекта, возвращаемого вызовом AJAX

Question

Я пытаюсь дождаться определенных строк в своего рода словаре, содержащем весь текст для кнопок, разделов, меток и т. Д.

Я начинаю с отправки списка строк по умолчанию на контроллер, который регистрируетвсе строки с моей CMS в случае, если эти конкретные значения еще не существуют.После этого я возвращаю новый объект, содержащий мои «словари», но с правильными значениями для текущего языка.

Я запускаю вызов с прослушивателем событий, который вызывает dispatch() на window.onload, а затемдобавить данные в состояние модуля Vuex.Затем я добавляю его в вычисляемую подпорку.

computed: {
    cartDictionary() {
        return this.$store.state.dictionaries.myDictionaries['cart']
    }
}

Итак, вот проблема: в моем шаблоне я пытаюсь получить значения из подпрограммы cartDictionary, которая является массивом.

<h2 class="checkout-section__header" v-html="cartDictionary['Cart.Heading']"></h2>

Но когда компонент рендерится, реквизит еще не имеет значения, так как он ожидает завершения вызова AJAX.И поэтому, конечно, я получаю ошибку cannot read property of undefined.

Есть идеи, как обойти это?Я хотел бы, чтобы словари были доступны через глобальный объект, вместо того, чтобы передавать все через реквизит, поскольку он построен с использованием атомарного дизайна, и это было бы безумно утомительно.

РЕДАКТИРОВАТЬ: Добавление большего количества кода для пояснения.

Мой модуль:

const dictionaryModule = {
namespaced: true,
state: {
    dictionaries: []
},
mutations: {
    setDictionaries (state, payload) {
        state.dictionaries = payload
    }
},
actions: {
    getDictionaries ({commit}) {
        return new Promise((resolve, reject) => {
            Dictionaries.init().then(response => {
                commit('setDictionaries', response)
                resolve(response)
                })
            })
        }
    }
}

Мой магазин:

const store = new Vuex.Store({
    modules: {
        cart: cartModule,
        search: searchModule,
        checkout: checkoutModule,
        filter: filterModule,
        product: productModule,
        dictionaries: dictionaryModule
    }
})

window.addEventListener('load', function () {
    store.dispatch('dictionaries/getDictionaries')
})

Answer 1

Я думаю, вы можете посмотреть cartDictionary и установить другую переменную данных.

вот так

<h2 class="checkout-section__header" v-html="cartHeading"></h2>



data () {
    return {
      cartHeading: ''
    }
},
watch: {
  'cartDictionary': function (after, before) {
    if (after) {
      this.cartHeading = after
    }
  }
}

Поскольку this.$store.state.dictionaries.myDictionarie не определено в начале, vuejs не может отобразить myDictionarie ['core'].Вот почему ваш код не работает.

Вы можете сделать это также

state: {
    dictionaries: {
        myDictionaries: {}
    }
}

и установить значения ключа dictionaries во время разрешения.

Answer 2

Мне также хотелось бы увидеть еще немного вашего кода, но так как я не могу комментировать ваши вопросы (вам нужно rep> 50), здесь все идет ...

У меня есть два общих предложения:

• Правильно ли вы настроили действие?Мутации всегда синхронны, а действия допускают асинхронные операции.Итак, если ваш http-клиент возвращает обещание (например, axios), вы должны дождаться результата в вашем действии, прежде чем вызывать соответствующую мутацию.См. Эту главу в официальных документах vuex: https://vuex.vuejs.org/guide/actions.html

• Вы не должны использовать что-то вроде window.onload, а вместо этого использовать хуки, предоставляемые Vue.js.Проверьте это: https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

• РЕДАКТИРОВАТЬ: В качестве третьего предложения: Проверьте, правильно ли вызваны действие и мутация.Если они обрабатываются в своем собственном модуле, вы должны зарегистрировать модуль в состоянии.