vuex命名空间的使用
前言:由于 Vuex 使用的是单一状态树,全局数据集成在一个对象中。这样导致数据过多时的不易管理,也增加的扩展的困难度。所以,开发者大多推荐将 store 对象分块。把 store 的管理变更为 不同模块 的管理。由此减低的维护难度。Vuex 也提供了命名空间,便于更快捷的访问内部模块。(是否可以理解为:最上层的 state、getter、mutation、action、modules 实际上也是
·
前言:
由于 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' }) }
更多推荐
已为社区贡献2条内容
所有评论(0)