vuex之getters的大大的方便

已于 2022-11-16 19:42:56 修改
阅读量507 收藏
点赞数
分类专栏： vue Vuex 文章标签： 前端 javascript 开发语言
于 2022-07-12 17:23:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52421092/article/details/125747341
版权
vue 同时被 2 个专栏收录
75 篇文章 2 订阅
订阅专栏
Vuex
11 篇文章 0 订阅
订阅专栏

简介: 我来介绍一下我用它的好处， vuex给我感觉就是一个存储数据的管理机制，并且还是一个缓存机制。

案例：

 

上面是这样的，我通过请求用户信息的接口    拿到数据后传进去vuex里面的异步操作， vuex里面把得到的值给了state.user_info的这个变量，并且把它保存到缓存里面， vuex里面getters相当于vue里面的计算属性 ，只要state里面有变量的数据变化就执行 ， 在vue页面可以通过this.$store.getters.getUserInfo;  获取getters下面getUserInfo函数return出去的值

上面就是这样的   大家可以想象一下   一个很大很大的项目    一个很常用的接口  同一个接口有很多页面需要请求这个接口    当一个软件用户数量非常庞大的时候     不停的请求接口     接口负担很大    上面的仅仅需要请求一次   把请求的数据放到缓存里面   哪里需要用到 直接从his.$store.getters.getUserInfo;拿

郑建零零发
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决$store.getters调用不执行的问题
12-13
api：https://vuex.vuejs.org/zh/guide/getters.html 场景： 在登录时将登录得到的用户信息存储在vuex的state和sessionStorage中。使用时在state中获取，当因为刷新等原因导致state中没有数据时，去sissionStorage中获取。 错误： 登录后，需要获取用户信息时，getters中属性的方法不会执行。只是去getters中获取缓存 解决方法： 将getters中的属性改写成方法，这样每次调用的时候就会执行，去从新获取数据。 getloginInfor: (state) => () => {} 代码： import V
VUEX 数据持久化，刷新后重新获取
与你清欢
10-15 1953
VUEX 数据持久化 // store.js getters: { userInfo(state) { console.log('getters',state); if (!state.userInfo.id) { let token = getStorage("token"); console.log('token',tok...
Vue3 直接使用Vuex的mapState和mapGetters时报错的分析及解决方案
haoduoyu2099的博客
11-28 5004
Vue3 组合式(setup)关于mapState和mapGetters直接使用会因为computed中没有this而报错，故而对其重新封装，给每个mapState和mapGetters返回的每个函数都绑定一个store对象
Vuex $store.state的值能获取，但是里面具体的值却获取不到
棠樾的博客
01-13 6584
问题： 打印this.$store.getters可以获取的到，但是打印this.$store.getters.authInfo就是undefined console.log(this.$store.getters,'是否登录') console.log(this.$store.getters.authInfo,'是否登录') 原因： 因为actions是异步操作，你在commit方法里再去打印肯定就有值了 为什么对象能打印到？因为对象那个变量是地址，你展开的时候对象已经扩充了，所以能看到。
为什么vuex的getter拿不到最新的属性 vuex中state状态改变了但是getter没有更新
z00001993的博客
04-28 5046
问题背景： <newer :newrModalShow="$store.getters['order/getNewer']"v-if="newerDatas" :newerDatas="newerDatas"/> 如上：一个页面引入一个组件，通过vuex状态去控制显示隐藏，通过浏览器看的state状态改变了，但是getter却没拿到最新的状态 解决： ...
利用vuex缓存常用数据，通过getter获取state中的数据和发送请求
ichLiebDich的博客
09-11 1806
代码 使用 import { mapGetters } from 'vuex' computed: { ...mapGetters([ 'professionList', // 从getter.js中获取下拉选择框的缓存， 可以减少请求 ]), }, getter.js import store from './index.js' const getters = { professionList: (state) => { if (!s
在vuex中利用axios请求数据，放入组件中，组件拿不到数据
qq_51542956的博客
11-08 949
上面主要是通过axios将dishesList请求到，然后通过mutations修改state内的dishesList。我猜测应该是异步的问题，于是用了this.$nextTick但到最后结果并没有变化。（这个并没有搞懂原因）然后在组件内通过mounted钩子，调用getDisheList,来让组件获取dishesList。下面是我的store内的js代码。到最后，利用计算属性就成功了。
Vuex
qq_44271884的博客
08-16 327
vue中各个组件之间传值 1.父子组件 父组件-->子组件，通过子组件的自定义属性：props 子组件-->父组件，通过自定义事件：this.$emit('事件名',参数1,参数2,...); 2.非父子组件或父子组件 通过数据总数Bus，this.$root.$emit('事件名',参数1,参数2,...) 3.非父子组件或父子组件 更好的...
Vuex使用方式及异步问题处理
2301_76988707的博客
10-11 1148
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态的变更可追踪和可维护。在 Vue.js 应用中，组件之间的通信是通过props 和事件来实现的，但是当应用变得复杂时，组件之间的通信会变得困难和混乱。Vuex 提供了一种集中式存储管理应用的状态的方式，将所有组件的共享状态抽取出来，以一个全局的单一状态树来管理。Vuex 的核心概念包括：State（状态）
Vue 中 store 使用方法讲解
热门推荐
Mr古技术分享
04-25 2万+
vuex 包含有五个基本的对象： state：存储状态。也就是变量； getters：派生状态。也就是set、get中的get，有两个可选参数：state、getters分别可以获取state中的变量和其他的getters。外部调用方式：store.getters.personInfo()。就和vue的computed差不多； mutations：提交状态修改。也就是set、get中的set，这是vuex中唯一修改state的方式，但不支持异步操作。第一个参数默认是state。外部调用方式：store.co
说说Vuex的getters属性的具体用法
10-17
主要介绍了说说Vuex的getters属性的具体用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
对vuex中getters计算过滤操作详解
01-21
getter这个概念其实我们写的时候感觉好像和Mutations修改状态一样，实际上它们是有区别的： getters比较死板，如果你的百度钱包只有在金额为100才能提现，那么你在写...第一步 在store.js里用const声明我们的getters属
Vuex之理解Getters的用法实例
01-21
1.什么是getters 在介绍state中我们了解到，在Store仓库里，state就是用来存放数据，若是对数据进行处理输出，比如数据要过滤，一般我们可以写到computed中。但是如果很多组件都使用这个过滤后的数据，比如饼状图...
vue在使用vuex时遇到...mapGetter不能使用解决方案
qq_38761664的博客
05-16 2324
这是由于少了一个解析器，可以通过下载安装 npm instakk --save-dev label-plugin-transform-object-rest-spread 完成后再项目目录.babelrc中放入下面内容： {  "presets":[ ["es2015",{modules":false}]     ],     "plugin":["transform-object-
vuex无法获取getters属性this.$store.getters.getCurChildId undefined
angyangan9569的博客
06-29 5151
问题描述 this.$store.getters.getCurChildId undefined 这是因为我们设置了命名空间namespaced: true, 在vuex官网中对命名空间的描述如下： 默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。 如果希望你...
获取vuex中数据，数据有但是页面log为空
a99101的博客
08-01 286
导致页面调用this.$store.state.xxx.xxx或者this.$store.getters.xxx时候获取为空。但是很疑惑的是this.$store数据又是有的。再使用后台管理系统中存在一个数据列表下拉框，这个下拉框数据再很多页面都需要使用，便存入了vuex中。但是没有用async await进行编写。查了好几种方法，还是使用计算属性获得仓库数据，在用监听获取新值菜可以拿到相关数据。
VUEX基础入门Store使用详解
小小默：进无止境
11-19 7079
【1】vuex 是什么 github 站点: https://github.com/vuejs/vuex 在线文档: https://vuex.vuejs.org/zh-cn/ 每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。 Vuex 和单纯的全局对象有以下两点不同： Vuex 的状态存储是响应式的。 当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高
vuex中getters 的基本用法
weixin_40305713的博客
08-27 9423
一、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({ .
WEB转Flutter基础学习笔记（内含vue和flutter对比）
最新发布
小易不止于搬砖的博客
05-17 669
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vuex获取getters
08-30
在使用Vuex时，要获取getters的值，可以通过this.$store.getters来实现。请注意，这里的this是Vue组件中的上下文。 例如，假设你在Vuex store中定义了一个名为user的getter，你可以通过以下方式获取它的值： ```...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值