【Vue】获取模块内的getters数据

本文主要是介绍【Vue】获取模块内的getters数据，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目标：

掌握模块中 getters 的访问语

语法：

使用模块中 getters 中的数据：

1. 直接通过模块名访问 $store.getters['模块名/xxx ']

   这是由于getters中并不是简单的像state中一样存储的是对象，相当于存了一个’user/UpperCaseName’的属性

   

   访问的时候，由于属性名有特殊字符，它是不能直接通过.去访问的，而是需要通过中括号[ ’ ’ ]

2. 通过 mapGetters 映射

   1. 默认根级别的映射 mapGetters([ 'xxx' ])
   2. 子模块的映射 mapGetters('模块名', ['xxx']) - 需要开启命名空间

---

代码示例

modules/user.js

const getters = {// 分模块后，state指代子模块的stateUpperCaseName (state) {return state.userInfo.name.toUpperCase()}
}

Son1.vue 直接访问getters

<!-- 测试访问模块中的getters - 原生 -->
<div>{{ $store.getters['user/UpperCaseName'] }}</div>

Son2.vue 通过命名空间访问

computed:{...mapGetters('user', ['UpperCaseName'])
}

这篇关于【Vue】获取模块内的getters数据的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---