需求是，目前有一個(gè)數(shù)組是通過(guò)后端請(qǐng)求獲取數(shù)據(jù)項(xiàng) 然后mutation到vuex中，然后有個(gè)input框需要對(duì)數(shù)組項(xiàng)中的某個(gè)屬性名進(jìn)行篩選，需要mutation成新的數(shù)組，但是input退格為空之后需要恢復(fù)到原來(lái)的vuex數(shù)組，并且篩選完成過(guò)程后，可能通過(guò)websocket推送會(huì)給原來(lái)的vuex數(shù)組push新的數(shù)據(jù)項(xiàng)，如果新推送的數(shù)據(jù)項(xiàng)不符合關(guān)鍵字也將被filter掉， 問(wèn)下這要如何實(shí)現(xiàn)。。感覺(jué)有點(diǎn)難。 let that = this
if (this.channels) {
return this.channels.filter(function (channel, index) {
return channel.channelName.toLowerCase().indexOf(that.search.toLowerCase()) !== -1
})
} else {
return []
}原來(lái)沒(méi)用vuex之前是這樣的算法。。但是現(xiàn)在需要使用vuex了，因?yàn)闃I(yè)務(wù)多了
1 回答
慕勒3428872
TA貢獻(xiàn)1848條經(jīng)驗(yàn) 獲得超6個(gè)贊
我的思路是你的vuex始終存儲(chǔ)后端返回的全量數(shù)據(jù)，不要在這去做過(guò)濾，當(dāng)websocket數(shù)據(jù)過(guò)來(lái)的時(shí)候就是直接在這個(gè)數(shù)組上push數(shù)據(jù)了。接下來(lái)就是過(guò)濾邏輯了，這部分?jǐn)?shù)據(jù)其實(shí)就是通過(guò)input的值篩選vuex中的數(shù)據(jù)的結(jié)果，所以你可以用一個(gè)computed屬性，然后在模板中使用這個(gè)計(jì)算屬性：
computed: {
filteredChannel () {
let search = this.search.toLowerCase()
return (this.channels || []).filter(channel => channel.channelName.toLowerCase().indexOf(search) !== -1)
}
}
添加回答
舉報(bào)
0/150
提交
取消