在nuxt查询对象中遇到奇怪的行为

Question

在搜索页面上，默认情况下，我使用page=0进行分页。然后在asyncData方法中使用此参数来调用api。但是不知何故，该值将增加一。

例如，这是我的网址

  

http://localhost:3000/search?page=0

这是asyncData代码，

    async asyncData({query, app, store}) {
        console.log("[Query Object]", query);

        store.commit('APPLY_SEARCH_FILTER', query);
        let { data } = await app.$api.Search.groups(query);

        let groups = data.data.groups;
        let meta = data.data.meta;

        store.commit('STORE_SEARCH_RESULTS', {
            groups: groups,
            meta: meta
        });
    },

查询对象的控制台日志如下所示： 当对象不展开时，它看起来像[Query Object] > {page: "0", "": null}。展开后，该值变为"1"。

[Query Object] 
{page: "0", "": null}
page
:
"1"
__ob__
:
Observer {value: {…}, dep: Dep, vmCount: 0}
get page
:
ƒ reactiveGetter()
set page
:
ƒ reactiveSetter(newVal)
__proto__
:
Object

它总是增加1，我不知道从哪里或为什么。

更新

搜索提交按钮：

`<button type="submit" @click.prevent="search" class="btn btn-primary text-uppercase btn-Search">Search</button>`

组件状态：

    data() {
        return {
            search_fields: {
                group_title: null,
                page_test: "abcd"
            }
        }
    },

search()方法

search() {
    console.log("[BEFORE EMIT]", this.search_fields);

    this.$store.commit('EMPTY_SEARCH_FILTERS');
    this.$emit('searchClicked', this.search_fields);
 },

和[BEFORE EMIT]控制台日志如下所示：

我不知道要在数据中添加“页面”键的位置。我没有在组件中添加它。

Answer 1

我想这是预期的行为。您store.commit进行了调用，我想这导致了store.mutations的调用，该调用又将页码增加了一个。由于javascript值是通过引用传递的，而console.log直到您按下>箭头时才实际记录项目，因此在您按下>时，查询对象将更新。