vue中模块化后mapState的使用

今天遇到一个新需求：按照当前用户的角色，为页面中的某字段分配不同的名称，大概就是这个意思。

采用的是vue-element-admin框架，框架里根据不同的功能界限划分出不同的模块分别管理模块数据，例如：user、tagView、permission等，放在modules文件夹里。

 

 

之前有说过使用mapState语法糖，在这里直接用computed去获取数据竟然不行。然后在官网有看到相关说明：进入官网。

代码如下：

在vuex的user模块中，抛出时的export default中添加了一句：namespaced:true   ，目的：给当前模块一个标识使模块域互相独立，并以在上图index中抛出模块时命名的名称作为前缀去获取其中信息。

应用：相当于声明了一个变量name，然后以state入参取得其modules文件夹中user文件里的name属性值。

<template>
  <div class="container">    
  </div>
</template>
<script>
import {mapState} from "vuex"
export default {
  computed:{
    ...mapState({
      'name':state=>state.user.username
    })
  },
  data(){
    return{
      
    }
  },
  mounted(){
    console.log(this.name)
  }
}
</script>