vuex - 辅助函数学习

官网文档:

https://vuex.vuejs.org/zh-cn/api.html  最底部

mapState

此函数返回一个对象,生成计算属性 - 当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。mapState可以声明多个

需要在组件中引入:

import { mapState } from 'vuex'

...mapState({ // ... }) 对象展开运算符

mapGetters

将store中的多个getter映射到局部组件的计算属性中

组件中引入

import { mapGetters } from 'vuex'

组件的computed计算属性中使用

 1 computed: {
 2 
 3     // 使用对象展开运算符将 getter 混入 computed 对象中
 4     ...mapGetters([
 5 
 6     'doneTodosCount',
 7 
 8     'anotherGetter',
 9 
10     // ...
11     ])
12 
13 }

或者给getter属性另起个名字:

mapGetters({

    doneCount: 'doneTodosCount'

})

mapMutations

将组件中的 methods 映射为 store.commit 调用(需要在根节点注入store)。

组件中引入:

import { mapMutations } from 'vuex'

组件的methods中使用:两种方式,传参字符串数组或者对象,

 1 methods: {
 2 
 3     ...mapMutations([
 4 
 5     'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
 6     // `mapMutations` 也支持载荷:
 7     'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
 8     ]),
 9 
10     ...mapMutations({
11 
12         add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
13     })
14 
15 }

mapActions

将组件的 methods 映射为 store.dispatch 调用(需要先在根节点注入 store):

组件中引入:

import { mapActions } from 'vuex'

组件的methods中使用:两种方式,传参字符串数组或者对象,

 1 methods: {
 2 
 3     ...mapActions([
 4 
 5     'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
 6     // `mapActions` 也支持载荷:
 7     'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
 8     ]),
 9 
10     ...mapActions({
11 
12         add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
13     })
14 
15 }

2018-04-07  17:57:31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏柠檬先生

Angularjs基础(三)

    AngularJS ng-model 指令     ng-model 指令用于绑定应用程序数据到HTML 控制器(input,select,text...

22550
来自专栏云瓣

Node.js 异步异闻录

提到 Node.js, 我们脑海就会浮现异步、非阻塞、单线程等关键词,进一步我们还会想到 buffer、模块机制、事件循环、进程、V8、libuv 等知识点。本...

42880
来自专栏Java学习网

常见的 Java 错误及避免方法之第三集(每集10个错误后续持续发布)

这是在代码尝试访问不在值内的数组索引时发生的运行时错误消息。以下代码将触发此异常:

6310
来自专栏Ryan Miao

java并发编程实践学习(2)--对象的组合

先验条件(Precondition):某些方法包含基于状态的先验条件。例如,不能从空队列中移除一个元素,在删除元素前队列必须处于非空状态。基于状态的先验条件的操...

366140
来自专栏九彩拼盘的叨叨叨

JS 文档生成工具:JSDoc 介绍

JSDoc是一个根据javascript文件中注释的信息,生成API文档的工具。生成的文档是html文件。类似 JavaDoc 和 PHPDoc。

23530
来自专栏C/C++基础

Linux下使用awk批量删除共享内存

awk 是一个强大的文本分析工具。sed 常常用于一整个行的处理,而 awk 则倾向于以空格和tab键为默认分隔符将每行切片成一个个域(也就是一列)来处理。aw...

17010
来自专栏公众号_薛勤的博客

Java多线程编程核心技术(三)多线程通信

通过本节可以学习到,线程与线程之间不是独立的个体,它们彼此之间可以互相通信和协作。

13880
来自专栏Java学习之路

Java的LockSupport工具,Condition接口和ConditionObject LockSupportConditionConditionObject

在之前我们文章(关于多线程编程基础和同步器),我们就接触到了LockSupport工具和Condition接口,之前使用LockSupport工具来唤醒阻塞的线...

36950
来自专栏大前端_Web

NodeJS学习三之API

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

14030
来自专栏瓜大三哥

Yaffs_guts

Yaffs_guts ? 1.Chunk的读写擦除 2.文件地址映射 3.文件系统对象 1.Chunk的读写擦除 我们知道,NAND Flash的基本擦除单位是...

226100

扫码关注云+社区

领取腾讯云代金券