现在可以通过简单地调用 userDetails 来引用 user 。
何时映射整个 state根据经验,仅当 state 中有大量数据,并且组件中全部需要它们时,才应该映射 。
在上面的例子中,如果我们只需要一个值(例如 username),则映射整个用户对象就没有多大意义 。
在映射时,整个对象将会全部加载到内存中 。实际上我们并不想继续把不需要的数据加载到内存中,因为这将是多余的,并且从长远来看会影响性能 。
映射 getter映射 getter 的语法与 mapState 函数相似 。
import { mapGetters } from 'vuex'export default { computed: { ...mapGetters([ 'firstCount', 'anotherGetter', ]) }}
与映射 state 类似,如果你打算使用其他名称,则可以把对象传递给 mapGetters 函数 。
import { mapGetters } from 'vuex'export default { computed: { ...mapGetters([ first:'firstCount', another:'anotherGetter', ]) }}
映射 mutation映射 Mutation 时,可以采用以下语法来提交 Mutation 。
this.$store.commit('mutationName`)
例如:
import { mapMutations } from 'vuex'export default { methods: { ...mapMutations([ 'search', // 映射 `this.increment()` 到 `this.$store.commit('search')` // `mapMutations` 也支持 payloads: 'searchBy' // 映射 `this.incrementBy(amount)` 到 `this.$store.commit('searchBy', amount)` ]), ...mapMutations({ find: 'search' // 映射 `this.add()` 到 `this.$store.commit('search')` }) }}
映射 action映射 action 与映射 mutation 非常相似,因为它也可以在方法中完成 。使用映射器会把 this.$store.dispatch('actionName') 绑定到映射器数组中的名称或对象的键 。
import { mapActions } from 'vuex'export default { // ... methods: { ...mapActions([ 'increment', // 映射 `this.increment()` 到 `this.$store.dispatch('increment')` // `mapActions` 也支持 payloads: 'incrementBy' // 映射 `this.incrementBy(amount)` 到 `this.$store.dispatch('incrementBy', amount)` ]), ...mapActions({ add: 'increment' // 映射 `this.add()` 到 `this.$store.dispatch('increment')` }) }}
总结看到这里,你应该能够学到:
- 对 Vuex 中的映射是如何工作的以及为什么要使用它有了深刻的了解
- 能够映射 Vuex store 中的所有组件(state、 getter、 mutation、action)
- 知道什么时候应该映射 store
转发链接:https://mp.weixin.qq.com/s/1sl21P0AHPlbFEq4_Q7hVQ
推荐阅读
- 三国志是一部完全意义上的通史吗 通志是一部什么体史书
- 《巫师3》和《老滚5》先玩哪个好?
- Window10中修改键位映射最稳妥的方法?修改注册表很危险
- 那些前端开发需要掌握的:Vuex基础使用方法
- 完全基于 Java 的开源深度学习平台,亚马逊的大佬带你上手
- 关于下一代智能手机的谈论 人工智能和云赋予手机完全个性化
- Windows打印机漏洞未被完全修复,攻击者可以通过Splooer入侵 超能网 2020-08-10 10:06:02
- 你真的知道匿名映射是什么吗?
- Linux分段系统中的地址映射和基本机制
- 北极冰盖完全消失 最后一块冰