test-web/src/store/tabValue.ts

import {
    createStore
} from "vuex";

export default createStore<any>({
    state: {
        "tabArray": [{
            title: '首页', //标题
            name: '0',
            start: false, //是否可删除
            path: 'home', //路径
        }], //默认首页进行展示 
        "editableTabsValue": {
            index: '0',
            menuIndex: '首页,home'
        } //默认选中菜单值
    },
    getters: { //计算属性
        //判断是否存在tab
        contains(state) {
            let tabIndex = -1;
            return function (value: any) {
                if (value && JSON.stringify(value) !== "{}") {
                    const tabData = value.split(',');
                    state.tabArray.forEach((tab: any, tagI: any) => {
                        if (tab.title === tabData[0] && tab.path === tabData[1]) {
                            tabIndex = tagI;
                        }
                    });
                    return tabIndex;
                } else {
                    return tabIndex;
                }
            };
        }
    },
    actions: {
        //添加tab
        addTab: function (context, value) {
            if (value.type === 1) {
                context.commit('AddTab', value.data);
            } else {
                const tabSign = context.getters.contains(value.data);
                const tabData = value.data.split(',');
                
                if (tabSign !== -1) { //判断标签是否存在,存在则进行跳转
                    context.commit('UpdateETV', tabSign + '');
                } else { //添加tab
                    const coord = context.state.tabArray.length + '';
                    const data = {
                        title: tabData[0],
                        name: coord,
                        start: true,
                        path: tabData[1]
                    };
                    sessionStorage.setItem('newTab', JSON.stringify(data));
                    context.commit('AddTab', data);
                    context.commit('UpdateETV', coord);
                }
            }
        },
        //删除tab
        removeTab: function (context, value) {
            let arr = context.state.tabArray;
            arr.splice(value, 1);
            //赋值默认选择最后一项
            context.state.editableTabsValue.index = (arr.length - 1) + '';
            const data = {
                arr: arr,
                value: -1
            };
            context.commit('sort', data);
        },
        //关闭其他
        closeTheOther: function (context, value) {
            const arr = context.state.tabArray.filter((item: any, index: number) => {
                if (value === -1) { //关闭全部
                    return item.start !== true;
                } else {
                    return !(item.start === true && index !== value); //关闭其他
                }
            });
            const data = {
                arr: arr,
                value: value
            };
            context.commit('sort', data);
        },
        //更新ETV
        updateETV: function (context, value) {
            context.commit('UpdateETV', value);
        },
        //更新MI
        updateMI: function (context, value) {
            context.commit('UpdateMI', value);
        }
    },
    mutations: {
        //添加tab
        AddTab(state, value) {
            state.tabArray.push(value);
        },
        //更新ETV
        UpdateETV(state, value) {
            state.editableTabsValue.index = value;
        },
        //更新MI
        UpdateMI(state, value) {
            state.editableTabsValue.menuIndex = value;
        },
        //排序后重新赋值
        sort(state, data) {
            data.arr.forEach((item: any, index: number) => {
                item.name = index + '';
            });
            state.tabArray.splice(0, state.tabArray.length, ...data.arr);
            //选项赋值
            if (data.value === -1) { //删除tab | 删除全部tab
                state.editableTabsValue.index = (state.tabArray.length - 1) + '';
            } else {
                state.editableTabsValue.index = '1';
            }
        }
    },
    modules: {}
});