vuex----的辅助函数mapState, mapActions, mapMutations用法和混入

于 2022-12-17 10:21:40 发布
阅读量617 收藏
点赞数 1
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_36617251/article/details/128350947
版权

Vuex的辅助函数mapState, mapActions, mapMutations用法和混入

爱学习的渣渣关注IP属地: 江苏

2022.03.28 00:14:13字数 287阅读 469

一.使用mapState来获取state里的值

第一步先解构

1.最简单的使用数组的形式来获取模块中state中的值

2.用对象的形式来获取模块中的state的值 好处在于和组件中的名字重复了可以改名

解构

二.使用mapGetters来获取getters属性

最简单的使用数组方式获取getters属性

使用对象的方式来获取getters属性

好处在于可以改名

三.使用mapMutations来获取信息

另一种数组的方式

mapMutations里面利用对象的方式改名防止重名的方法

四、使用mapActions来获取信息

五、vue混入对象

全局混入

谨慎使用全局混入，因为它会影响每个单独创建的VUe实例（包括第三方组件）；大多情况下，只应当应用于自定义选项，就像上面示例一样。推荐将其作为插件发布，以避免重复应用混入

配置

局部混入

先在src目录下建一个mixins文件

在mixins文件建一个全局js,将公共的组件放在里面

1人点赞

日记本

想你的风吹到了瑞士
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决VUEX的mapState/...mapState等取值问题
10-15
主要介绍了解决VUEX的mapState/...mapState等取值问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
153-Vue中的vuex内的辅助函数——mapState,mapGetters,mapMutations,mapActions的用法
jolinoy的博客
08-11 363
153-Vue中的vuex内的辅助函数——mapState,mapGetters,mapMutations,mapActions的用法。此文章所涉及到的代码：src/components/Comp1.vue。其它的都是初建的代码，未做改动，此处不展示。
Vuex辅助函数 mapState, mapGetters, mapMutations, mapActions的使用
MM_520131400的博客
12-30 413
一、在store 创建 home.js const state = { bookList: ["西游记", "水浒传", "红楼梦", "三国演义"], num: 2 }; const getters = { num: state => state.num * 2, nums: state => state.num * 3 }; const mutations = { SET_LIST: (state, list) => { state.bookList = l
vue当中的mapState 使用
梨子社区
08-18 464
vue当中的mapState 使用
...mapGetters和...mapState获取到的state，怎么拿来在methods中操作？
有问题可关注公众号：前端研究院 后台输入问题回复
01-22 1万+
...mapState({ a: function (state) { return state.A }, b: function (state) { return state.b } }) 在其他方法中直接访问this.a this.b即可
vue element-ui table 组件封装使用
最新发布
06-07
在Vue.js开发中，Element UI库是一个非常受欢迎的前端组件库，它提供了丰富的UI组件，包括我们今天要讨论的Table组件。...在使用他人封装的组件时，理解其内部逻辑和扩展方式同样重要，以便于在需要时进行自定义调整。
vscode-scss:所有Sass文件中的变量，混入和函数的IntelliSense（仅SCSS语法）
04-29
工作空间中所有文件的SCSS IntelliSense（变量，混入和函数）。 捐款 你喜欢这个项目吗？ 通过捐赠，创建问题或请求请求来支持它。 安装 插件安装分为以下几个阶段： 按F1并选择Extensions: Install Extensions 。...
kemalyst-validators：提供了用于对对象建模的验证方法的混入
02-04
在上面的例子中，我们定义了一个 `User` 类，其中包含了 `email` 和 `password` 属性，并使用 `validates` 方法添加了相应的验证规则。`presence: true` 确保这两个字段都不为空，`format` 验证 `email` 是否符合...
Go-一个Golangimplant使用Slack作为命令和控制服务器
08-14
使用Slack作为C&C服务器是一种非传统的方法，因为它混入了合法的商业通信环境中，降低了被检测的可能性。攻击者可以通过创建私有Slack频道，利用API来发送和接收命令，同时还可以利用Slack的消息加密特性来保护通信...
TSDecorators-example:Typescript装饰器用法示例
05-16
示例显示了如何使用四个不同的装饰器（类，方法，参数和属性），在装饰器中传递参数时使用的装饰器工厂以及自定义元数据用法。/ src / patterns 包括使用装饰器促进混入和依赖注入的示例/测试/单位此目录具有一些...
VUEX的mapState/...mapState等取值问题
rainbow8300的博客
04-02 1万+
有木有发现你页面的this.$store，一般都正常，但是总有那么几次，成为你页面报错的罪魁祸首！，那其实除了和vue的生命周期有关以外，还跟store取值的方式有关，下面就说一下新大陆之——mapState mapMutations mapGetters的使用 简单说一下我对mapState的理解，字面意思就是把store中state 的值遍历出来，任你取用，就不用写this.$store....
mapState映射module中的state
wilL-my的博客
01-27 1683
computed: { ...mapState({ a: state => state.some.nested.module.a, b: state => state.some.nested.module.b }) }, methods: { ...mapActions([ 'some/nested/module/foo', // -> this['some/nested/module/foo']() 'some/nested/module/b.
vue中mixins使用原理详解
weixin_43152108的博客
09-03 4103
混入 (mixins)： 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。 1.把要用的方法抽出来 写一个js 然后暴露出去 里面的参数以及this 都相当于组件注入 可以全局调用 import { mapActions, mapState } from "vuex"; export default { props: ["itemdata"], data() { return
通过mapState获取vuex的数据
ct5211314的博客
11-08 527
通过mapState将vuex的属性映射为计算属性，进而进行数据的读取与使用。
vuex 多modules 下mapState的映射写法！
天天的博客
09-24 3900
这个在我以前的博客中写过，没有记住，这次复习下： https://blog.csdn.net/qq_15009739/article/details/108036519?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160091587719724835801557%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=
vue中Promise的实战用法
weixin_44251396的博客
12-31 1664
promise是什么？ 1、主要用于异步计算 2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果 3、可以在对象之间传递和操作promise，帮助我们处理队列 为什么会有promise？ 为了避免界面冻结（任务） 同步：假设你去了一家饭店，找个位置，叫来服务员，这个时候服务员对你说，对不起我是“同步”服务员，我要服务完这张桌子才能招呼你。那桌客人明明已经吃上了，你只是想要个菜单...
Vuex入门(六)——mapState, mapGetters, mapMutations, mapActions全网最全详解终结篇(带源码)
m0_49714202的博客
03-15 1827
目录 知识不足的地方可以点击查看哦~~~ Vuex入门(一)—— state,mapState,…mapState对象展开符详解 Vuex入门(二)—— mutations详解 Vuex入门(三)—— getters,getters,…getters对象展开符详解 Vuex入门(四)—— action和…mapActions详解 Vuex入门(五)—— 封装module全网最全详解(带源码) Vuex入门(六)——mapState, mapGetters, mapMutations, mapAction
Vuex 获取state对象中的值的所有方法（module中的state）
热门推荐
trenki的博客
05-17 1万+
1.直接从store实例取值 // main.js中，把store注册在根实例下，可使用this.$stroe.state直接取值 export default { computed: { testNum() { return this.$store.state.testNum; } } }; 2.使用mapState取值的多种方法 import { mapState } from "vuex"; export default { data() { ret
【vuex】 获取store中state值， mapState
AAAXiaoApple的博客
08-18 1452
代码】【vuex】 获取store中state值。
vuex 中的 mapState 辅助函数的作用及用法
05-12
`mapState` 是 Vuex 中的一个辅助函数，它可以将 store 中的 state 映射到组件的 computed 计算属性中，方便组件直接使用。它的作用可以简化组件中获取 state 的代码，使代码更加简洁和易读。 `mapState` 的语法...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值