Как вызвать часы ПОСЛЕ того, как я прочитал массив из БД?

Question

На моей начальной странице vue / cli 4 / vuex мне нужно заполнить выбранный ввод значением по умолчанию из
vuex store. Чтобы заполнить выбранные входные данные, мне нужно, чтобы элементы выбора были прочитаны из БД, и у меня возникла проблема с тем, что часы запускаются ДО ТОГО, как я прочитал данные из БД в событии монтирования. Я делаю так:

watch: {
    defaultAdSavedFilters: {
        handler: function (value) {
            console.log('WATCH defaultAdSavedFilters value::')
            console.log(value)
            if (!this.isEmpty(value.title)) {
                this.filter_title = value.title
            }
            if (!this.isEmpty(value.category_id)) {
                this.categoriesLabels.map((nexCategoriesLabel) => { // this.categoriesLabels IS EMPTY
                    if (nexCategoriesLabel.code === value.category_id) {
                        this.selection_filter_category_id = {code: value.category_id, label: nexCategoriesLabel.label};
                    }
                });

            }
        }
    }, // 

}, // watch: {



mounted() {            
    retrieveAppDictionaries('ads_list', ['ads_per_page', 'categoriesLabels']);  // REQUEST TO DB
    bus.$on('appDictionariesRetrieved', (response) => {
        if (response.request_key === 'ads_list') { // this is triggered AFTER watch
            this.ads_per_page = response.ads_per_page
            this.categoriesLabels = response.categoriesLabels
            // this.$forceUpdate() // IF UNCOMMENT THAT DOES NOT HELP
            Vue.$forceUpdate()  // THAT DOES NOT HELP
        }
    })
    this.loadAds(true)

}, // mounted() {

Я нашел это Можете ли вы заставить Vue. js перезагрузить / повторно выполнить рендеринг? ветви и пробовал некоторые решения, такие как

Vue.$forceUpdate()

но это не работает. Если есть правильный способ вызвать просмотр defaultAdSavedFilters ПОСЛЕ того, как я прочитал массив из db?

Модифицированный BLOCK: Я использую действия / мутации Vuex, когда мне нужно прочитать / сохранить / использовать / обновить данные зарегистрированного пользователя, например defaultAdSavedFilters, который определяется как:

computed: {
    defaultAdSavedFilters: function () {
        return this.$store.getters.defaultAdSavedFilters
    },

Данные ads_per_page (используется для pagionaion), CategoriesLabels (используется для выбора элементов ввода) не имеет ничего общего с зарегистрированным пользователем, поэтому я не используйте для них vuex, и я использую метод retrieveAppDictionaries для чтения их из БД и шины для их прослушивания, который определяется как:

 import {bus} from '@/main'

Конечно, у меня есть данные (блок:

export default {
    data() {
        return {
            ...
            ads_per_page: 20,

            categoriesLabels: [],
            ...
        }
    },


"vue": "^2.6.10",
"vue-router": "^3.1.3",
"vuex": "^3.1.2"

Спасибо!

Answer 1

Пожалуйста, добавьте метод data() от вашего компонента. Но я почти уверен, что он НЕ запускается из-за того, как вы назначаете результат из вызова API.

Попробуйте это:

mounted() {            
    retrieveAppDictionaries('ads_list', ['ads_per_page', 'categoriesLabels']);  // REQUEST TO DB
    bus.$on('appDictionariesRetrieved', (response) => {
        if (response.request_key === 'ads_list') { // this is triggered AFTER watch
            this.ads_per_page = [ ...response.ads_per_page ]
            this.categoriesLabels = [ ...response.categoriesLabels ]
        }
    })
    this.loadAds(true)
}

Однако я не понимаю, что bus делает для вас и почему вы не используете действия / мутации Vuex