现在我在使用 vuex2 进行开发，现在存在这样的问题。

store.js

export default new Vuex.store({
    state : {
        apps : []
    },
    mutations : {
        'SET_APP' : function(state, app){
            var hasApp = false;
            state.apps.map(item=>{
                if(item.id == app.id){
                    hasApp = true;
                    item.open = true;
                }else{
                    item.open = false;
                }
            })
            if(!hasApp){
                app.open  = true;
                state.apps.push(app);
            }
        }
    },
    getters : {
        'GET_APP' : function(state){
            return state.apps;
        }
    }
})

app.vue

<template>
    <ul>
        <li v-for="app in apps" :class="{active:app.open}">{{app.name}}</li>
    </ul>
    <ul>
        <li v-for="item in list">
            <a @click="setApp(item)">{{item.name}}</a>
        </li>
    </ul>
</template>

<script>
    import {mapGetters} from 'vuex'
    export default {
        computed : {
            ...mapGetters({
                apps : 'GET_APP'
            })
        },
        methods : {
            setApp(app){
                this.$store.commit('SET_APP', app)
            }
        },
        data(){
            return {
                list : [
                    {id:1, name:1},
                    {id:2, name:2},
                    {id:3, name:3},
                    {id:4, name:4},
                    {id:5, name:5}
                ]
            }
        }
    }
</script>

要实现的效果就是下面又一行文字，当我点击下面一行文字的时候，如果上面不存在这个id的数据我就把当前点击的内容添加上去,并且高亮显示当前添加的内容，如果当前id的数据在上面已经存在就把上面已经高亮的数据取消高亮，并且高亮当前点击的这个id

遇到的问题
现在是在如果上面不存在的时候，点击下面的按钮，内容会增加到上面，并且也会高亮显示当前添加的内容，但是如果内容存在，就不会高亮之前存在的内容也不会把之前添加的内容取消高亮。
因为刚刚开始使用 vue vuex 不是很理解是我的 store 写的有问题还是我的操作方式有问题，希望您能帮我解答。谢谢。