Vuex getters 共享状态的计算属性

最新推荐文章于 2024-08-14 01:24:07 发布
最新推荐文章于 2024-08-14 01:24:07 发布
阅读量219 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rbgg_mp/article/details/112008807
本文探讨了getters在Vue.js store中的关键作用，它如何处理原始state数据，提供预处理后的数据，以减少页面刷新时的计算成本。通过实例说明了如何使用getters获取state的特定部分，并强调了其缓存机制和依赖更新特性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

state中存的数据并不是最终页面中使用的数据，例如A页面需要3个 B页面需要全部。
我们取数据的时候肯定希望取得时候就是需要的数据，而不是取到以后在进行处理数据拿到想要的，那么getters就起到了重要的作用（可以处理一下原始的数据，把你想要的数据过滤出来）

例如我再页面中 去state 中数据的前三个就可以这样
在这里插入图片描述
在页面中使用
在这里插入图片描述

getters 的返回值会根据它的依赖被缓存起来，且只有当然得依赖值发生了改变才会被重新计算
默认的参数 是指向state 中定义的状态，state可以看做是原始状态，getters是处理之后的状态
也同样支持的写法有 :

  • this.$store.getters.xxx
  • ...mapGetters(['xxxx'])
Vuex数据共享
m0_69876298的博客
02-24 504
一起学习Vuex
vuex getters计算属性
weixin_43294560的博客
03-03 773
export default new Vuex.Store({ //存储数据 state:{ }, //方法 mutations:{ }, //计算属性 getters:{ (1)获取,this.$store.getters.函数名 (2)在计算属性中获取,在自...
vuex 计算属性getters
zhangyubababa的博客
10-29 247
vuex getters 计算属性 使用getters中的数据
爱学习的小强
09-16 337
vuex（状态共享）基础用法
0.0 的博客
08-26 281
当项目创建好后在根目录下回自带一个store文件夹 在state中定义的数据为共享数据，mutations内为自定义的方法名（两个参数第一个为state为共享数据的整体，第二个值为要改变后的值） 在js中使用（改变数值） //得到焦点事件 get() { //commit传入两个个参数(第一个为vuex内mutations内方法的名字, 第二个为改变之后的值) this.$store.commit("setrrr", 0); }, 在html中使用 &
对vuex中getters计算过滤操作详解
10-16
Getters 允许你在 Vuex Store 中定义一些计算属性，这些属性是基于 Store 中的状态（`state`）进行计算的。与 `mutations` 不同，`getters` 并不直接改变状态，而是提供了一种方式来衍生或处理状态。它们在组件内部...
说说Vuex的getters属性的具体用法
11-30
我们可以认为，【getters】是store的计算属性。 源码分析 wrapGetters初始化getters，接受3个参数，store表示当前的Store实例，moduleGetters当前模块下所有的getters，modulePath对应模块的路径 function `wra
Vuex之理解Getters的用法实例
01-21
我们可以认为，【getters】是store的计算属性。 ２.如何使用 定义：我们可以在store中定义getters，第一个参数是state const getters = {style:state => state.style} 传参：定义的Getters会暴露为stor
vuex getters取值
12-26
Vuex是一个专为Vue.js应用程序设计的状态管理模式，它允许你在组件之间共享状态，并提供了方便的方式来读取和修改这个状态。在Vuex中，`getters`是一种用于计算并返回复杂值的函数，它们通常基于store中的state或...
vuex getters.js使用
最新发布
03-04
下面是一个完整的例子展示怎样将计算属性映射到局部变量上以便直接用于模板渲染[^3] : ```html <h1>This is an about page {{ oldDate }} {{ newGetDate(oldDate) }} {{ setStr }} import { mapGetters, ...
Vue学习：mapState、mapGetters映射state和getters中的数据作为计算属性
weixin_47295886的博客
03-09 531
发现了重复了 this.$store.state，如何 进行优化==将变化的内容传入，执行里面的return。{a:a}===可以省略变成a 但是{a:'a'}--可以省略为[a]还有映射getters上的变成计算属性、需要导入mapGetters。借助mapState生成计算属性，从state中读取数据。借助mapState生成计算属性，从state中读取数据。mapState：引入的映射状态====生成代码。he生成计算属性，sum去state中寻找sum。
Vuex的getters
lihui61357457的博客
12-05 251
详情可见 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>60-Vuex-getters</title> <script src="js/vue.js"></script> <script src="js/vuex.js"></script> </head&gt
Vuex学习笔记（四）——getters
qq_42345237的博客
01-17 302
Vuex中的getter，可以认为是store的计算属性。就跟计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有当它的以来至发生了改变才会被重新计算。 我们来看一个例子： // 先创建一个store const store = new Vuex.Store({ state: { todos: [ { id: 1, text: '......
vue习题
qq_45179355的博客
06-03 1万+
一 单选题，每道小题1分，共9道小题，9分1. 下面选项中，可以用来创建store实例对象的是（）。A new Vuex.Store({})B new Vue({})C new Vuex({})D new Store({})2. 以下代码 {{this.$store.state.name}}var store = new Vuex.Store({ state:{name:'store'}})var vm = new Vue({...
深入探索Vue Getters和mapGetters的原理及使用详解
繁依Fanyi的博客
08-14 2416
Vuex中的getters可以被视为store的计算属性。就像Vue组件中的计算属性一样，getters的返回值会基于其依赖被缓存起来，且只有当它的依赖值发生变化时才会重新计算。这使得getters非常适合用于从store中的state派生出一些状态。Vuex的getters和mapGetters是非常强大的工具，它们可以帮助我们从store中的state派生出新的状态，并在组件中方便地使用这些状态。在实际开发中，我们可以通过合理使用getters和mapGetters，提高代码的可维护性和性能。
Vue学习第23天 —— Vuex中getters详细讲解及使用案例，与computed计算属性对比
背心的博客
09-16 4195
Vuex中getters详细讲解及使用案例，与computed计算属性对比
mapGetters的使用
weixin_48567214的博客
01-05 6623
如果一个变量或对象需要在多个页面和组件中使用，那么，可以使用mapGetters。2.在method同级上放入computed。getters中的state。列如：getters: {
Vuex之getters的使用方法
热门推荐
每文的博客
05-12 3万+
什么是getters? getters其实就是store的计算属性，对state里面的状态进行过滤处理，用法与组件自身的计算属性一模一样。 怎么使用getters? 在store文件夹下的index.js中： import Vuex from 'vuex' import Vue from 'vue' //1.安装插件 Vue.use(Vuex) const state = { count: 10, students: [ {id: 1, name: 'zhangsan', ag
vuex————getters属性
qq_41716608的博客
03-15 1157
1.概念：getters相当于之前组件中学习的计算属性,getters属性主要是对于state中数据的一种过滤 2.使用场景：在项目开发中，有时候希望对state中的某个属性在多个组件中展示出不同状态 3.书写位置：与state同级 1）store.js import Vue from 'vue'; import Vuex from 'vuex'; // 在vue中使用vue...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值