vue vuex mapgetters和mapstate

最新推荐文章于 2024-04-04 08:00:00 发布
最新推荐文章于 2024-04-04 08:00:00 发布
阅读量242 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MCCLS/article/details/119188806
版权
本文介绍了如何利用计算属性和Vuex的mapState/mapGetters简化模板中的内容，避免插值语法冗长。通过实例展示了如何使用mapState导入状态并结合函数，以及数组和对象的不同写法来提升代码效率。
摘要由CSDN通过智能技术生成

要点：

 

 

通过计算属性可以简化模板上写的内容 

防止插值语法写的过长

 

 

这边我们发现其实用计算属性直接写也比较麻烦,红色线都是重复的内容而vuex的某个方法可以帮助你简化

通过分析,可以看出只要把变化的东西交给某个函数即可

这边变化的东西为方法名和state里面的值名

这边要在vuex里面引入一个一个mapState

里面写入对象,注意写成字符串,形式he:'sum'（其实he也是一个字符串,但是可以省略）

 然后我们先调用一个mapState看一下是什么

发现是一个对象

然后我们把这个直接写入计算属性发现报错

因为计算属性是一个方法,在方法里面直接写对象显然是不正确的

用一个es6的解决方法

下图...obj2, //表示把obj2的内容展开放入在obj里

并且是放在中间的,与写的位置对应

 

所以同理

把函数前加入...在最后加一个逗号就行

 

 但注意的点是

当自己用计算属性写时,计算属性会在开发者工具中显示出来

 

当我们不自己去写计算属性,通过mapState去实现时.其实它也是计算属性

 

发现开发者工具里面把它们分类在了vue的绑定上,其实我们知道这里面的东西都是隶属于computed上的

 

 这是对象写法

 下面为数组写法

我们先回顾一个简写 

这边对象里面的key和要找的变量名一致时,就可以简写为a

但是如果时一个字符串那就不可以简写了！！！！ 

 

所以这边的对象用简写方式行不通,因为是字符串

 所以可以尝试用数组方法写

相当于在计算属性里,写了一个方法名字为sum,而且读取的是state里面的sum

 但是要注意的是想用数组写法的话

如下写就是错误的因为state里面没有he xuexiao xueke等数据名

 

 当对于getters时

就再引用一个mapGetters

 同理

 

 

兜里揣着星星
关注
Vuex实践-mapState和mapGetters
01-14 4317
一.前言 　　本文章是vuex系列的最后一篇，主要总结的是如何使用mapState和mapGetters访问vuex中的state和getters。 二.多个模块中mapState和mapGetters的使用 　　上一篇文章《Vuex实践（中）》里面我们总结的就是多模块的内容，所以关于store.js、moduleA.js和moduleB.js的代码保持不变。 　　在此为了方便观看，我将这...
Vuex 中的 mapState 和 mapGetters
最新发布
承蒙关照！
08-14 367
使用 mapState和 mapGetters可以显著简化在 Vue 组件中使用 Vuex Store 的过程。本文介绍了它们的用法以及在模块化时的特殊注意事项。掌握这些辅助函数，将能更高效地管理和使用应用中的状态。希望这篇文章能对你在 Vue 开发中有所帮助！
vuex的辅助函数：mapState和mapGetters
richest_qi的博客
05-05 596
文章目录自己写计算属性mapState/mapGetters生成计算属性数组写法对象写法对象写法（key-value，value是一个字符串）对象写法（key-value，value是一个函数） 本篇介绍vuex的辅助函数：mapState和mapGetters。 代码涉及两个文件， store/index.js。本例中，该文件内容不发生变更 Count.vue。本例中，该文件内容将发生多次变更，如 自己写计算属性 辅助函数（mapState/mapGetters）生成计算属性 数组写法 对象写法
vuex：弄懂mapState、mapGetters、mapMutations、mapActions
u010227042的博客
06-17 1776
vuex进阶 一、state 1.1 引入vuex 以后，我们需要在state中定义变量，类似于vue中的data，通过state来存放状态 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { //存放状态 nickname:'Simba', age:20, gender:'男' }, mutations: {},
...mapGetters,mapGetters,...mapState,mapState的用法
lzc2644481789的博客
09-28 2万+
一、简介 本文主要介绍...mapGetters,mapGetters,...mapState,mapState这个四个东西在vue中的用法。可能没有办法像大佬一样把所有用法都精彩的介绍给大家，但是基本用法一定给大家讲清楚。 二、看代码 1....mapGetters和mapGetters： 这两个东西用在computed里面，常规的用法如下图所示： (1)首先是我的store/index.js: (2)接下来是.....
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
11-29
然后在你的 Vue 组件中，可以使用 `mapState`, `mapGetters`, `mapActions` 和 `mapMutations` 辅助函数来简化访问和操作 State、Getters、Actions 和 Mutations。这些辅助函数可以让你在组件内便捷地绑定 Store 中...
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题.doc
05-18
总结来说，解决mpvue + vuex开发微信小程序时，vuex辅助函数无法使用的问题，关键在于理解mpvue的特性和vue的原型链机制，通过在Vue原型上添加$store属性，确保子组件能正确访问store，从而使mapState、mapGetters等...
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
12-09
在微信小程序开发中，开发者常会遇到一个问题：在使用mpvue和vuex的组合时，vuex的辅助函数如mapState、mapGetters、mapMutations和mapActions无法正常工作。这个问题主要是由于mpvue框架与vue-cli + vuex项目的集成...
vuex里mapState,mapGetters使用详解
刻痕
01-14 4735
vuex里mapState,mapGetters使用详解
...mapState和 ...mapGetters的区别
kin的博客
12-18 1091
...mapState和 ...mapGetters的区别
前端之vue插件vuex的mapState、mapGetters、mapActions、mapMutations
weixin_46372074的博客
05-17 1386
vuex 四个mapvuex 四个mapmapState与mapGetter ---多组件数据共享mapState映射状态(数据) -- 用计算属性映射共享数据state数据mapState使用1 -- 对象写法mapState使用2 -- 数组写法√mapGetters映射 加工后的数据(Getters)mapMutations与mapActions位与methods内mapMutations 事件回调函数要记得传参对象写法数组写法 (回调函数与mutations内函数同名)mapActionsmap
Vuex mapGetters,mapActions
weixin_33719619的博客
04-24 352
一、基本用法 1. 初始化并创建一个项目 ? 1 2 3 vue init webpack-simple vuex-demo cd vuex-demo npm install 2. 安装 vuex ? 1 npm install vuex -S 3. 在 src 目录下创建 store.js 文件，并在 main.js 文件中导入并配...
mapState与mapGetters语法糖
nick_zhang的博客
11-17 2594
vuex中的 mapState，mapGetters 属于辅助函数，其实就是vuex的一个语法糖，使代码更简洁更优雅。 <script> import { mapState, mapGetters } from "vuex" export default { computed: { //原先 templateInfo(){ return this.$store.state.templateInfo }, //现在
mapState mapGetters
HeX_7的博客
06-23 603
求和案例_mapState mapGetters mapMutations mapActions
详细分析Vuex中的mapGetters
码农研究僧的博客
04-04 4999
用 mapGetters 和 mapState，可以简化组件中对于 Vuex 中状态和 getter 的映射工作，减少了重复的代码书写
vuex中关于mapState，mapGetters,mapMutations,mapActions的作用
热门推荐
a641832648的博客
03-15 6万+
mapState,vuex
mapState 与 mapGetters 的语法
NancyFyn的博客
05-28 440
// mapState 接收一个数组做为参数，参数中的每一项，就是在仓库中的 state 数据 mapState([state1, state2, state3]) // mapGetters 接收一个数组做为参数，参数中的每一项，就是在仓库中的 getter 数据 mapGetters([getter1, getter2]) mapState 与 mapGetters 的语法 // mapState 接收一个数组做为参数，参数中的每一项，就是在仓库中的 state 数据 mapState([stat
mapGetters, mapState
09-28
mapGetters和mapState是VueX库中的两个辅助函数，用于在Vue组件中访问和使用Vuex的状态和计算属性。 mapGetters函数用于将Vuex的getters映射到组件的计算属性上。通过使用mapGetters函数，我们可以在组件中直接访问和使用Vuex的getters，而无需手动引入和使用store对象。使用mapGetters函数的语法如下： ```javascript import { mapGetters } from 'vuex'; export default { // ... computed: { ...mapGetters([ 'getterName1', 'getterName2', // ... ]), }, }; ``` mapState函数用于将Vuex的state映射到组件的计算属性上。通过使用mapState函数，我们可以在组件中直接访问和使用Vuex的state，而无需手动引入和使用store对象。使用mapState函数的语法如下： ```javascript import { mapState } from 'vuex'; export default { // ... computed: { ...mapState([ 'stateName1', 'stateName2', // ... ]), }, }; ``` 注意事项： - 使用mapGetters和mapState函数时，需要确保已经在Vue组件中安装了Vuex。 - 在计算属性中使用mapGetters和mapState时，返回的计算属性将会自动响应状态的变化。 - mapGetters和mapState函数可以接受一个数组或对象，可以映射多个状态或计算属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值