vue之vuex的getters详解

最新推荐文章于 2024-01-16 10:44:40 发布
最新推荐文章于 2024-01-16 10:44:40 发布
阅读量3.2k 收藏 1
点赞数 3
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45061876/article/details/129485615
版权

1.getters：类似是Vuex中的计算属性，也具有缓存功能：如果state中的数据得到了改变，那么getters中的属性的值也会发生改变，如果state的值没有发生任何变化，那么getters中的属性，的值就不会发生改变

（1）例如state里有个list数据：

（2）再gitters里通过filter方法过滤出需要的数据

（3）之后可以再APP页面，对过滤出的数据进行使用，渲染页面，有两种方式，一种change方式一种computed方式

（4），如果需要修改state状态，统一在mutations里面进行修改，

先定义一个修改方法ADD，payload为参数，再使用commit提交来执行mutations的ADD方法

（5）在action里存放异步请求，如果异步请求再mutation里写，数据会乱

 

（6）同步的vuex提交的流程图

 

异步vuex 修改数据的流程

 

 

李怼怼蚂蚁雅黑
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vuex之理解Getters的用法实例
01-21
1.什么是getters 在介绍state中我们了解到，在Store仓库里，state就是用来存放数据，若是对数据进行处理输出，比如数据要过滤，一般我们可以写到computed中。但是如果很多组件都使用这个过滤后的数据，比如饼状图组件和曲线图组件，我们是否可以把这个数据抽提出来共享？这就是getters存在的意义。我们可以认为，【getters】是store的计算属性。 ２.如何使用 定义：我们可以在store中定义getters，第一个参数是state const getters = {style:state => state.style} 传参：定义的Getters会暴露为stor
详解Vue爬坑之vuex初识
01-19
在 Vue.js 的项目中，如果项目结构简单， 父子组件之间的数据传递可以使用  props 或者 $emit 等方式. 但是如果是大型项目，很多时候都需要在子组件之间传递数据，使用之前的方式就不太方便。Vue 的状态管理工具 Vuex 完美的解决了这个问题。  一、安装并引入 Vuex 项目结构：  首先使用 npm 安装 Vuex cnpm install vuex -S 然后在 main.js 中引入 import Vue from 'vue' import App from './App' import Vuex from 'vuex' import store from './
vuex中getters 的基本用法
weixin_40305713的博客
08-27 9403
一、getter 定义 Vuex允许我们在store中定义"getter" ，用于对state中存储的数据进行过滤操作。 就像vue生命周期中的computed一样，getter的返回值 会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算 二、使用方法 1、通过属性访问 Getter 接受 state 作为其第一个参数： example:现在需要获取list：[1,2,3,4,5,6,7,8,9]中大于5的元素 const store = new Vuex.Store({ .
vuex总结(三)——getters
weixin_47450807的博客
02-23 1万+
一、getters的基本使用 getters相当于计算属性。 或者我们可以在App.vue组件中使用options api。 二、getters的参数 getters的第一个参数是state, 第二个参数是getters。 此时我们打印出参数。 三、getters的返回函数 getters可以返回一个函数，并且在使用的时候直接调用即可，如上图所示。 四、getters在componsition api中的使用 直接在外层套上computed即可。 五、mapGetters的使用 六、mapGe
Vuex入门（3）—— getters,mapGetters,...mapGetters详解
热门推荐
我不是水哥
08-30 14万+
Vuex提供了state这样的状态统一管理树,你可以在vue中用computed计算属性接收这些公共状态,以便使用,当然你也可以在接收原值的基础上对这个值做出一些改造,如 computed:{ sex:function(){ return this.$store.state.sex + '加个字符串,算是改造' } } 但是如果你的其他组件也要使用这...
Vuex里的Getter
E_li_na的博客
05-09 3633
1.如何定义Getter Vuex允许我们在store中定义getter，（可以认为是store的计算属性）。getter的返回值会根据他的依赖被缓存起来，只有它的依赖发生了改变，才会被重新计算。 const store=new Vuex.Store({ state:{ todos:[ { id:1,text:'1w',done:true }, { id:2,text:'1...
vuex中getter的使用
前端如逆水行舟...
09-19 3375
vuex中getter的主要目的是为了数据过滤，得到自己想要的数据，先说如果不使用getters，功能一样可以完成，使用...
vuex中的getters
jakelihua
06-05 1071
本文讲解vuex里面的getters的用法。这里是vue官方对其的介绍。我们现在通过下面一个例子进行知识点的引入，在下面这个页面中，我定义了一个方法，用来把时间规范化，这个方法其实就是getters需要做的事儿，就是用来计算属性的。
Vuex系列之 Getter 的使用
老__L的博客
12-25 2137
Vuex系列之 Getter 的使用
vuex---getters的基本使用(类似于计算属性）
weixin_51614564的博客
07-12 916
某些属性我们可能需要经过变化后来使用，这个时候可以使用getters:案例举例：目前我们希望以下案例中的数据能够达到总数量总价格的一个效果 考虑到其他页面也许也会用到这种逻辑计算，所有可以使用getters 属性将其管理起来 页面如果使用直接调取这个函数就可以了 关于getters 其他讲解 （1）关于getters 第二个参数，作用是调用getters 里面的其他函数 争对视图中的数据做一个简化 vue2 getters 增强方式如果我们界面需要太多的数据展示的话，就需要在computed
vuex前端开发,getters是什么？怎么调用？简单的案例操作
最新发布
yrldjsbk的博客
01-16 762
下面通过一些简单的案例，来了解一下，vuex当中的getters到底是什么意思，有哪些实际的操作案例。vuex前端开发,getters是什么？它可以对state进行一些处理，然后返回一个新的值，供组件使用。store中的state进行计算或过滤。Vuex的getters主要用于对。，类似于Vue组件中的。
vue–vuex详解
12-08
Vuex 什么是Vuex？ 官方说法：Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 个人理解：Vuex是用来管理组件之间通信的一个插件 为什么要用Vuex？ 我们知道组件之间是独立的，组件之间想要实现通信，我目前知道的就只有props选项，但这也仅限于父组件和子组件之间的通信。如果兄弟组件之间想要实现通信呢？嗯..，方法应该有。抛开怎么实现的问题，试想一下，当做中大型项目时，面对一大堆组件之间的通信，还有一大堆的逻辑代码，会不会很抓狂？？那为何不把组件之间共享的数据给“拎”出来，在一定
vue--vuex详解
10-17
主要介绍了vue--vuex的详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vuex 实现getter值赋值给vue组件里的data示例
12-13
通过watch将orderDetailsData对象赋值给data中的consignee对象，这样能将操作能避免v-model修改时，直接改动vuex中的值。 <template> <input type="text" placeholder="请输入收货人名字" v-model="consignee.name"> <input type="text" placeholder="请输入收货地址" v-model="consignee.address"> <input type="text" placeholder="请输入收货人手机号" v-model="consignee.mobil
对vuex中getters计算过滤操作详解
01-21
getter这个概念其实我们写的时候感觉好像和Mutations修改状态一样，实际上它们是有区别的： getters比较死板，如果你的百度钱包只有在金额为100才能提现，那么你在写...第一步 在store.js里用const声明我们的getters属
vuex状态管理模式之Getters属性
iissoftware的博客
03-21 1万+
上一节中我们讲到了state属性，它是组件数据的一个状态，今天我们来学习一下vuex中第二个属性getters。 那什么是Getters?它有什么作用？ Getters 我们可以理解为store仓库的一个计算属性，它的作用主要是用来派生出一些新的状态。比如我们要把state状态的数据进行一次映射或者筛选，再把这个结果重新计算并提供给组件使用。举个例子： store.js 此时，gett...
Vuex--getters--使用/教程/实例
IT利刃出鞘的博客
01-27 1817
本文用示例介绍Vuex的五大核心之一：getters。
Vuex中的Getter的使用
weixin_43613849的博客
07-06 6079
1、Getter的作用 1、传入一个参数（state） 在getter中接受的第一个参数是Vuex中的state 有时候，我们需要从store中获取一些state变异后的状态 getters: { powerCounter(state) { return state.counter * state.counter }, more15stu(state) { return state.students.filter(item => item.a
Vuex之Getters详解
一只小鹰
11-28 2609
原文地址： https://www.jeremyjone.com/543/ ， 转载请注明。 作为Vue的状态管理工具，Vuex的使用率相当之高。Vuex具有4个属性，state，getters，actions，和mutations。 今天来讨论一下getters。它相当于vue的computed计算属性。每当state中的值变化时，它也会自动更新。这个在我们需要那些稍微对state中的属性进...
vue-vuex详解
11-18
Vue.js是一个流行的JavaScript框架，它允许您构建动态Web应用程序。Vuex是一个专为Vue.js应用程序开发的状态管理模式。它允许您在应用程序中管理和维护状态，例如用户信息、购物车、主题等。Vuex将状态存储在一个集中的存储库中，称为store。Vuex的核心概念包括state、mutations、actions和getters。 - state：存储应用程序级别的状态，可以通过store.state访问。 - mutations：用于更改状态的函数，必须是同步函数。可以通过store.commit方法调用。 - actions：用于处理异步操作的函数，可以包含任意异步操作。可以通过store.dispatch方法调用。 - getters：用于从store中获取状态的函数，可以通过store.getters访问。 下面是一个简单的示例，演示如何在Vue.js应用程序中使用Vuex： 1.安装Vuex ```shell npm install vuex --save ``` 2.创建store ```javascript import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { incrementAsync ({ commit }) { setTimeout(() => { commit('increment') }, 1000) } }, getters: { getCount: state => { return state.count } } }) export default store ``` 3.在Vue组件中使用store ```javascript <template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> <button @click="incrementAsync">Increment Async</button> </div> </template> <script> import { mapGetters, mapActions } from 'vuex' export default { computed: { ...mapGetters([ 'getCount' ]) }, methods: { ...mapActions([ 'increment', 'incrementAsync' ]) } } </script> ``` 在上面的示例中，我们创建了一个名为count的状态，并定义了一个名为increment的mutation和一个名为incrementAsync的action。我们还定义了一个名为getCount的getter，用于从store中获取count状态。在Vue组件中，我们使用mapGetters和mapActions帮助程序将getter和action映射到组件中。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值