在我的搜索页面中,默认情况下我使用 page=0
进行分页。并在 asyncData
方法中使用此参数调用 api。但不知何故,该值增加了一个。
所以这是我的网址,例如,
这是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);
},
我不知道在数据中的什么地方添加了“page”键。我没有将它添加到组件中。
最佳答案
我想这种行为是意料之中的。您 store.commit
调用,我想这会导致调用 store.mutations,这又将页码递增 1。由于 javascript 值是通过引用传递的,并且在您按下 >
箭头之前,console.log 不会实际记录项目,因此当您按下 >
时,查询对象会更新.
关于javascript - 面对 nuxt 查询对象中的怪异行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51727904/