面对 nuxt 查询对象中的怪异行为

Question

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

所以这是我的 url 例如，

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 在您按下 > 箭头之前不会实际记录项目，因此在您按下 > 时更新查询对象.

面对 nuxt 查询对象中的怪异行为

Facing weired behaviour in nuxt query object

javascript

vue.js

nuxt.js