Vuex模块化+命名空间

T-腾腾

于 2022-03-19 11:53:59 发布

阅读量380

点赞数

分类专栏： Vue.js js 文章标签：前端 vue.js javascript

本文链接：https://blog.youkuaiyun.com/m0_50832030/article/details/123591614

版权

本文旨在探讨如何通过Vuex实现模块化的代码组织，以提高代码可维护性和数据分类的清晰度。详细介绍了在store.js中配置命名空间的方法，以及在组件中如何在启用命名空间的情况下读取state、getters，以及如何调用dispatch和commit。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、目的：让代码更好维护，让多种数据分类更加明确

2.、store.js文件中配置命名空间

const countAbout = {
    namespaced:true,//开启命名空间
    state:{x:1},
    mutations:{ ... },
    actions:{ ... },
    getters:{
        bigSum(state){
            return state.sum*10;
        }
    }
}

const personAbout = {
    namespaced:true,//开启命名空间
    state:{ ... },
    mutations:{ ... },
    actions:{ ... },
}

const store = new Vuex.Store(
{
    //配置命名空间在Vuex.Store中
    modules:{
        countAbout,
        personAbout 
    }
})

3、开启命名空间后，组件中读取state数据：

//方法一：自己直接读取
this.$store.state.personAbout.list
//方法二：借助mapState读取
...mapState('命名空间的名字',['state中的方法名,可以写多个']),

4、开启命名空间后，组件中读取getters数据：

//方法一：自己直接读取
this.$store.getters['getters中的方法名']
//方法二：借助mapGetters读取
...mapGetters('命名空间的名字',['getters中的方法名,可以写多个']),

5、开

最低0.47元/天解锁文章