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+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
这篇文章主要介绍了vue+echarts+datav大屏数据展示及实现中国地图省市县下钻,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-11-11
这篇文章主要介绍了vue-router的两种模式的区别，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
这篇文章主要为大家介绍了Vue3 源码解读之 Teleport 组件使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
解决vue打包报错Unexpected token: punc的问题
这篇文章主要介绍了解决vue打包报错Unexpected token: punc的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
搭建vue3项目以及按需引入element-ui框架组件全过程
element是基于vue.js框架开发的快速搭建前端的UI框架,下面这篇文章主要给大家介绍了关于搭建vue3项目以及按需引入element-ui框架组件的相关资料,文中通过图文以及代码介绍的非常详细,需要的朋友可以参考下2024-02-02
本文主要介绍了el-form-item表单label添加提示图标的实现,我们将了解El-Form-Item的基本概念和用法,及添加提示图标以及如何自定义图标样式,感兴趣的可以了解一下2023-11-11
这篇文章主要介绍了vue+element+electron仿微信实现,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
微信、支付宝支付密码时的密码输入框大家都很熟悉，本文主要介绍了vue3如何实现6位支付密码输入框，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要介绍了Vue虚拟dom是如何被创建的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-10-10
vite配置别名并处理报错:找不到模块“xxx”或其相应的类型声明方法详解
我在学习vue3+vite+ts的时候,在配置别名这一步的时候遇到了一个问题,这篇文章主要给大家介绍了关于vite配置别名并处理报错:找不到模块“xxx”或其相应的类型声明的相关资料,需要的朋友可以参考下2022-11-11
最新评论