vuex怎么使用数据(vuex的辅助函数该如何使用)
类别:编程学习 浏览量:1794
时间:2021-10-25 10:04:42 vuex怎么使用数据
vuex的辅助函数该如何使用目录
- mapState
- mapGetters
- mapMutations
- mapActios
- 多个modules
import { mapState } from 'vuex' export default { // ... computed:{ ...mapState({ // 箭头函数可使代码更简练 count: state => state.count, // 传字符串参数 'count' 等同于 `state => state.count` countAlias: 'count', // 为了能够使用 `this` 获取局部状态,必须使用常规函数 countPlusLocalState (state) { return state.count + this.localCount } }) } }
定义的属性名与state中的名称相同时,可以传入一个数组
//定义state const state={ count:1, } //在组件中使用辅助函数 computed:{ ...mapState(['count']) }
computed:{ ...mapGetters({ // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount` doneCount: 'doneTodosCount' }) }
当属性名与getters中定义的相同时,可以传入一个数组
computed:{ computed: { // 使用对象展开运算符将 getter 混入 computed 对象中 ...mapGetters([ 'doneTodosCount', 'anotherGetter', // ... ]) } }
总结:
- mapState与mapGetters都用computed来进行映射
- 在组件中映射完成后,通过this.映射属性名进行使用
methods:{ ...mapMutations({ add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')` }) }
当属性名与mapMutatios中定义的相同时,可以传入一个数组
methods:{ ...mapMutations([ 'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')` // `mapMutations` 也支持载荷: 'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)` ]), }
mathods:{ ...mapActions({ add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')` }) }
当属性名与mapActios中定义的相同时,可以传入一个数组
methods:{ ...mapActions([ 'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')` // `mapActions` 也支持载荷: 'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)` ]), }
总结
- mapMutations与mapActios都在methods中进行映射
- 映射之后变成一个方法
在不使用辅助函数的时候,
this.$store.commit('app/addCount')
使用辅助函数,辅助函数的第一个参数给定命名空间的路径
computed: { ...mapState('some/nested/module', { a: state => state.a, b: state => state.b }) }, methods: { ...mapActions('some/nested/module', [ 'foo', // -> this.foo() 'bar' // -> this.bar() ]) }
或者使用 createNamespacedHelpers函数来创建一个基于命名空间的辅助函数
import { createNamespacedHelpers } from 'vuex' const { mapState, mapActions } = createNamespacedHelpers('some/nested/module') //给定路径 //使用方法与之前相同 export default { computed: { // 在 `some/nested/module` 中查找 ...mapState({ a: state => state.a, b: state => state.b }) }, methods: { // 在 `some/nested/module` 中查找 ...mapActions([ 'foo', 'bar' ]) } }
以上就是vuex的辅助函数该如何使用的详细内容,更多关于vuex的辅助函数的资料请关注开心学习网其它相关文章!
您可能感兴趣
- vue编程加入购物车(vuex实现简单的购物车功能)
- vuex-table行列转换效果(vue3+el-table实现行列转换)
- vue-cli请求数据的方式(vue-cli配置使用Vuex的全过程记录)
- vuex数据持续化(Vuex数据持久化实现的思路与代码)
- vue3.0零基础入门(快速掌握Vue3.0中如何上手Vuex状态管理)
- vue中的mapgetter优势(vuex 中辅助函数mapGetters的基本用法详解)
- vuex原理及使用方法(Vuex状态机的快速了解与实例应用)
- vuex怎么使用数据(vuex的辅助函数该如何使用)
- vuex中action的值怎么接(vuex中Getter的用法详解)
- vuex存取修改数据流程(vuex数据持久化的两种实现方案)
- 美国数十万加仑牛奶倒进下水道,世界会重演1929年的大萧条吗(美国数十万加仑牛奶倒进下水道)
- 美国数十万加仑牛奶倒入下水道,贫民区食不果腹,历史再次重演(美国数十万加仑牛奶倒入下水道)
- 美国倒掉数十万加仑牛奶 上热搜第一,这一幕似曾相识(美国倒掉数十万加仑牛奶)
- 深度 倒牛奶 这一幕为何又在美国上演(深度倒牛奶)
- 美国数十万加仑牛奶倒下水道怎么回事 原因曝光令人心痛(美国数十万加仑牛奶倒下水道怎么回事)
- 探索中国神秘文字(探索中国神秘文字)
热门推荐
- tomcat环境配置教程(Tomcat服务器的安装配置图文教程推荐)
- thinkphp前后端配合(thinkPHP+LayUI 流加载实现功能)
- docker镜像查看分层(Docker 镜像优化从1.16GB到22.4MB)
- dedecms中修改图片(让dedecms织梦后台支持上传bmp格式的图片的教程)
- pandas统计多行数据(pandas去重复行并分类汇总的实现方法)
- mysql常用存储方案及基本原理(详解分析MySQL8.0的内存消耗)
- docker下运行python3(使用Docker+jenkins+python3环境搭建超详细教程)
- 用js编写tab栏切换(JavaScript实现简易tab栏切换内容栏)
- sqlserver复制表结构及数据到新表(SQL SERVER 表与表之间 字段一对多sql语句写法)
- mysqltext与varchar区别(MySQL CHAR和VARCHAR该如何选择)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9