vuex如何模块重用？

Question

先说一下我的业务场景，我现在有A、B两个页面，
A页面里有a1、a2两个子组件，通过vuex的isComponent来显示具体的某一个组件

A.vue的代码如下：

<template>
    <div class="box">
        <keep-alive>
            <component :is="isComponent"></component>
        </keep-alive>
    </div>
</template>

<script>
    // a1组件
    import a1 from './a1';

    // a2组件
    import a2 from './a2';

    import { mapState } from 'vuex';
    export default {
        data () {
            return {};
        },
        computed: {
            ...mapState({
                isComponent: state => state.a.isComponent
            })
        },
        components: {
            a1,
            a2
        },
        methods: {},
        created () {
            this.$store.commit('setComponent', 'a1');
        }
    };
</script>

A页面的vuex文件a.js的代码如下：

export default {
    state () {
        return {
            // 当前展示的组件名称
            isComponent: ''
        };
    },

    gettters: {},

    mutations: {
        // 设置当前要展示的组件
        setComponent: (state, componentName) => {
            state.isComponent = componentName;
        }
    }
};

B页面对应的代码和A页面类似
B.vue的代码如下：

<template>
    <div class="box">
        <keep-alive>
            <component :is="isComponent"></component>
        </keep-alive>
    </div>
</template>

<script>
    // b1组件
    import b1 from './b1';

    // b2组件
    import b2 from './b2';

    import { mapState } from 'vuex';
    export default {
        data () {
            return {};
        },
        computed: {
            ...mapState({
                isComponent: state => state.b.isComponent
            })
        },
        components: {
            b1,
            b2
        },
        methods: {},
        created () {
            this.$store.commit('setComponent', 'b1');
        }
    };
</script>

B页面的vuex文件b.js的代码如下：

export default {
    state () {
        return {
            // 当前展示的组件名称
            isComponent: ''
        };
    },

    gettters: {},

    mutations: {
        // 设置当前要展示的组件
        setComponent: (state, componentName) => {
            state.isComponent = componentName;
        }
    }
};

后期可能还有C、D、E...等页面，问：vuex中的a.js和b.js里的代码基本一致，怎样可以避免重复代码？

Answer 1

我是这么理解的，可封装成公共的组件，所有的页面都可以调用，然后就涉及到如何使用公共组件模块，但是做到不互相影响的问题。目前知道的两种方案：
1.就是在使用vuex时候，加上路由进行区分。例如

this.$store.dispatch('setComponent', [{route: this.$route.path, data: {}}])

2.使用vuex的modules，不同的页面使用不同的modules，区分so easy。
仅供参考，（不知道各位大神有没有更好的）

Answer 2

请问问题解决了吗

Answer 3

看下这个链接是不是你要的解决方案，我也不是很确定，仅供参考https://blog.csdn.net/weixin_37855704/article/details/105542551