在计算状态的vuejs中搜索

Question

我有一个组件，可以在vuex 中呈现存储中的数据

组件有一个计算状态。当编写搜索查询时，它将过滤kommunhanteringItems的商店状态来搜索客户，而这里我有一个问题，即计算状态会改变商店中的状态，我不希望它这样做。

商店中的状态为this.$store.state.todos.kommunhanteringItems:

kommunhanteringItems: [
{
gId: 1,
gtitle: 'Group1',
items: [
{cid: 1, customer: 'Vicotria Nils'},
{cid: 2, customer: 'Mona Andersson'}
]
},
{
gId: 2,
gtitle: 'Group2',
items: [
{cid: 3, customer: 'Jacob Ström'},
{cid: 4, customer: 'Magdalin eriksson'}
]
}
]

计算成分：

SearchInTables() {
let k = this.$store.state.todos.kommunhanteringItems
if (this.SearchQuery != '') {
let SearchFilter = []
let self = this
k.forEach(function (x) {
let items = x.items
let filter = items.filter((item) => {
return item.customer.toUpperCase().includes(self.SearchQuery.toUpperCase())
})
x.items = filter
SearchFilter.push(x)
})
return SearchFilter
} else {
return k
}
},

Answer 1

问题是，在执行x.items = filter时，您正在写入存储中数组中的对象x。

为了避免这种情况，您需要创建x的副本，并替换items。有关使用Object.assign执行此操作的示例，请参见下文

SearchInTables() {
let k = this.$store.state.todos.kommunhanteringItems
if (this.SearchQuery != '') {
let SearchFilter = []
let self = this
k.forEach(function (x) {
let filter = x.items.filter((item) => {
return item.customer.toUpperCase().includes(self.SearchQuery.toUpperCase())
})
SearchFilter.push(Object.assign({}, x, { items: filter })
})
return SearchFilter
} else {
return k
}
}