
Vuex中getters动态获取state的值
发布日期:2022-02-17 02:39:47
浏览次数:20
分类:技术文章
本文共 1009 字,大约阅读时间需要 3 分钟。
前言
在做项目时,getters里有很多冗余代码,但是仔细一看可以根据参数来解决,于是决定使用传参来进行获取,减少代码冗余。
案例
需求:在getters里能够根据值动态获取到people的元素。经过多次尝试,最终得到下面的代码。
state.js代码如下:export default { people: [ { name: 'zs', age: 14 }, { name: 'ss', age: 24 }, { name: 'gh', age: 34 } ]}
getters.js代码如下:
const getters = { // 根据index获取state.person[index] getPerson: function (state) { // console.log(state) return function (index) { return state.people[index] } }, // 获取state.person[0] getPerson1: function (state) { // console.log('getPerson1:', state.people[0]) // console.log(typeof getters.getPerson) return function // console.log(getters.getPerson(state)(1)) 注: state不传过去的话,getPerson()找不到state return getters.getPerson(state)(1) // 成功获取state.person[0] }, getPerson2: function (state) { return getters.getPerson(state)(2) // 成功获取到state.person[1] }}export default getters
说明
因为项目中数据还要响应式,因此我使用setInterval方法来模拟是否会实时更新,事实证明可以,因此可以推荐用这种方法。


转载地址:https://blog.csdn.net/qq_39811414/article/details/109609670 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
表示我来过!
[***.240.166.169]2023年05月25日 01时11分54秒
关于作者

喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
最新文章
015-Go 数据库操作注意事项
2019-07-09 05:52:28
进程实时监控pidstat命令详解
2019-07-09 05:52:27
python3 钉钉群机器人 webhook
2019-07-09 05:52:27
Python基础知识汇总
2019-07-09 05:52:27
BZOJ2761: [JLOI2011]不重复数字(map)
2019-07-09 05:52:26
Redis DEL 命令 - 该命令用于在 key 存在是删除 key。
2019-07-09 05:52:26
redis push/pop(List)的17条命令
2019-07-09 05:52:25
域代码 语法及应用
2019-07-09 05:52:25
mybatis 乐观锁和逻辑删除
2019-07-09 05:52:25
大脑不清醒什么原因?
2019-07-09 05:52:24
WebView 和JS交互 addJavascriptInterface evaluateJavascript
2019-07-09 05:52:23
WPF richTextBox 滚动到某项
2019-07-09 05:52:23
使用Navicat Premium 链接本地数据库的方法(二)
2019-07-09 05:52:23
MVC ---- 去掉HTML过滤
2019-07-09 05:52:22
互逆矩阵特征值,奇异值的关系
2019-07-09 05:52:22
async & await 的前世今生(Updated)
2019-07-09 05:52:21
[日常] Go语言圣经-命令行参数
2019-07-09 05:52:21
Recommended Settings for Tracing and Message Logging
2019-07-09 05:52:20
bootstrap-multiselect.js如何动态更新select里的数据
2019-07-09 05:52:20
用VSCode开发一个asp.net core 2.0+angular 5项目(4): Angular5全局错误处理
2019-07-09 05:52:19