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>