文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vuex模块获取数据及方法的简单示例

2023-03-24 11:22

关注

前言:为了减轻store的负担,产生模块(module),每个模块独立,可复用

一、模块必写

示例:namespaced:true

必写原因 为,当多模块整合时,actions和mutations会整合为数组,但是getters不会,它是唯一的,不会整合,所以为了getters正常使用的同时每个模块具有独立性和可复用,namespaced:true必须写

二、获取数据

1.正常获取模块数据

代码如下(示例):

 this.$store.state.模块.num  //数据
 this.$store.dispatch('模块/方法')  //方法
 this.$store.getters['模块/sum']

这个方法可以获取到数据,但是看起来是不是比较麻烦,尤其是当这个数据没太多的逻辑处理,直接插入视图,代码看起来太多了,接下来给大家分享其他方法

2.辅助函数获取模块数据

vuex中提供了四种辅助函数,mapState,mapActions,mapMutations,mapGetters,写的时候直接从vuex中提溜出来

示例:

import {mapState,mapActions,mapMutations,mapGetters} from 'vuex'

使用方法:

计算属性:

...mapState('模块',{n:"num"})  //第一种对象写法
 
...mapState('模块',["num"])     //第二种数组写法

方法中:

...mapMutations("模块",["方法"])

2.createnamespacedhelpers获取模块数据(官网提供)

它也是vuex中的一部分,它是一个对象,对象包含四个辅助函数,如图所示:

 当我们知道它是什么之后,接下来就是使用

引入 

import {createNamespacedHelpers} from "vuex"

打印之后我们也知道createNamespacedHelpers它是一个对象,呢我们就可以通过解构赋值拿到那四个辅助函数 ,示例:

let {mapstate,mapGetters,mapMutations} = createNamespacedHelpers("模块")

这时使用就跟上面的辅助函数的方法大差不差

计算属性:

...mapState(["num"])

总结

到此这篇关于vuex模块获取数据及方法的文章就介绍到这了,更多相关vuex模块获取数据内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯