如何用关键字筛选一个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)

    }

}