vuex模块获取数据及方法的简单示例
更新时间：2023年03月24日 10:05:12 作者：进阶的宫女
Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,下面这篇文章主要给大家介绍了关于vuex模块获取数据及方法的相关资料,需要的朋友可以参考下
前言：为了减轻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模块获取数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue跨域解决方法 ,需要的朋友可以参考下2017-10-10
本篇文章主要介绍了vue父子组件的嵌套的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了详解vue-router的导航钩子(导航守卫)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
这篇文章主要介绍了在IDEA中安装vue插件全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
本篇文章主要介绍了Vue2.0实现1.0的搜索过滤器功能实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-03-03
这篇文章主要介绍了浅谈vue项目重构技术要点和总结,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了vue项目中使用token的身份验证的简单实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要介绍了uniapp和vue的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-10-10
详解从零搭建 vue2 vue-router2 webpack3 工程
本篇文章主要介绍了详解从零搭建 vue2 vue-router2 webpack3 工程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
vue中使用elementUI自定义校验及点击提交不生效问题解决办法
我们在项目中经常会用到ElementUI的表单验证,下面这篇文章主要给大家介绍了关于vue中使用elementUI自定义校验及点击提交不生效问题解决的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
最新评论