Vuejs2 从db读取数组后如何触发watch？

在我的vue/cli 4/vuex打开页面中，我需要使用来自的默认值填充select input vuex商店。要填充选择输入，我需要从db读取选择项，我有一个问题，即手表被触发 在mount事件中从db读取数据之前。 我是这样做的：

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() {

我找到了这个 branch做了一些决定，比如

Vue.$forceUpdate()

但这是行不通的。 在我从db读取数组后，是否有正确的方法触发watch DefaultAdSavedFilter

修改块： 当我需要读取/保留/使用/更新已登录用户的数据时，我会使用Vuex操作/突变，如 defaultAdSavedFilters，定义为：

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

 import {bus} from '@/main'

用于分页的数据广告，用于选择输入项的分类标签与 logged user，这就是我不使用vuex的原因，我使用retrieveAppDictionaries方法从数据库中读取它们 和总线来听他们，这被定义为：

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

 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"

谢谢

请从组件中添加数据方法。但我很确定它不会触发，因为您分配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)
}

---

但是，我不明白总线为您做了什么，以及您为什么不使用Vuex操作/突变

请查看修改后的块@Borjante，在你的代码中，我只看到删除了Vue的行。$forceUpdate要尝试什么？您的建议是什么？我删除了forceUpdate，但也更改了为此分配数据的方式。请您解释一下此包装的含义：[…response.ads_per_page]？为什么它能解决这个问题？试试看，告诉我它是否有效。你要做的是重新设定价值观。这样VueJS就无法知道您是否修改了阵列。另一个可行的方法是循环数组并推送到this.categoriesLabels。签出此文档：我收到控制台错误vue.runtime.esm.js？2b0e:619[vue warn]：无效的属性：每个页面的属性类型检查失败。在-->中找到了预期的数字、字符串和get数组，在控制台中，我看到首先设置了WATCH值，然后检索db。因此，对于循环，我看不出它有什么帮助？