vuex命名空间的使用

文章目录

        • 1、开启命名空间
        • 2、引入带有命名空间的数据
        • 3、获取命名空间的数据

前言:

由于 Vuex 使用的是单一状态树,全局数据集成在一个对象中。这样导致数据过多时的不易管理,也增加的扩展的困难度。所以,开发者大多推荐将 store 对象分块。把 store 的管理变更为 不同模块 的管理。由此减低的维护难度。Vuex 也提供了命名空间,便于更快捷的访问内部模块。(是否可以理解为:最上层的 state、getter、mutation、action、modules 实际上也是注册在一个名为 store 的命名空间内部的。只是引入时默认为store 。)

new Vue({ store })

1、开启命名空间

namespaced: true

2、引入带有命名空间的数据
// user.js
const state = {
	name: 'zhangsan',
    age: 20
}
const getters = {
    getName: state => state.name
}
module.exports = {
    namespaced: true , 
    state,getters
}
// store/index.js
new Vuex.Store({
    state: {},
    modules: {
        user: () => import('./user.js')
    }
})
3、获取命名空间的数据
  • 原始方式

    this.$store.state.user
    
  • 辅助函数

    • 导入辅助函数
    import { mapState , mapGetters } from 'vuex';
    
    • 方式一:直接访问 modules 名为 user 的空间
    computed: mapState({
        name: state => state.user.name,
        age: state => state.user.age    
    }),
    mounted() {
        console.log(this.name); // zhangsan
        console.log(this.age); // 20
    }
    
    • 方式二:本质与方式一相同,额外使用了解构
    computed: {
    	...mapState({
            name: state => state.user.name,
            age: state => state.user.age
        })        
    },
    
    • 方式三:参数设置命名空间

      mapState( ’ 命名空间模块名称 ’ , [ ’ 模块内部的数据 ’ ])

      mapState( ’ 命名空间模块名称 ’ , { ’ 新名称 ': ’ 模块内部数据名称 ’ } )

    computed: {
    	...mapState('user' , ['name' , 'age' ]);
        ...mapState('user' , {
            'userName': 'name',
            'userAge': 'age'
        })
    },
    
    • 方式四:快捷方式(测试 mapState 不能使用)

      mapGetters({ 方法名称:‘命名空间名称’ + ’ / ’ + ’ 方法名称 ’ })

    computed: {
        ...mapGetters({
            getName: 'user/getName'
        })
    }
    

vuex命名空间的使用_第1张图片

你可能感兴趣的:(web,前端,vue)