vuex命名空间的使用

前言：

由于 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'
      })
  }