如何用关键字筛选一个vuex获取的数组

Question

需求是，目前有一个数组是通过后端请求获取数据项 然后mutation到vuex中，然后有个input框需要对数组项中的某个属性名进行筛选，需要mutation成新的数组，但是input退格为空之后需要恢复到原来的vuex数组，并且筛选完成过程后，可能通过websocket推送会给原来的vuex数组push新的数据项，如果新推送的数据项不符合关键字也将被filter掉， 问下这要如何实现。。感觉有点难。

     let that = this
     if (this.channels) { 
           return this.channels.filter(function (channel, index) {    
                return channel.channelName.toLowerCase().indexOf(that.search.toLowerCase()) !== -1
       })
     } else {   
        return []
     }

原来没用vuex之前是这样的算法。。但是现在需要使用vuex了，因为业务多了

Answer 1

我的思路是你的vuex始终存储后端返回的全量数据，不要在这去做过滤，当websocket数据过来的时候就是直接在这个数组上push数据了。接下来就是过滤逻辑了，这部分数据其实就是通过input的值筛选vuex中的数据的结果，所以你可以用一个computed属性，然后在模板中使用这个计算属性：computed: {    filteredChannel () {        let search = this.search.toLowerCase()        return (this.channels || []).filter(channel => channel.channelName.toLowerCase().indexOf(search) !== -1)    }}