javascript - 面对 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] 控制台日志如下所示:

我不知道在数据中的什么地方添加了“page”键。我没有将它添加到组件中。

Answer 1

我想这种行为是意料之中的。您 store.commit 调用，我想这会导致调用 store.mutations，这又将页码递增 1。由于 javascript 值是通过引用传递的，并且在您按下 > 箭头之前，console.log 不会实际记录项目，因此当您按下 > 时，查询对象会更新.