jquery加载页面的几种方法(页面加载完成就执行)如何去掉css 渐变时的锯齿效果AJAX请求以及解决跨域的问题浅析Vue3动态组件怎么进行异常处理html+css+js写的AI五子棋游戏(附源码)基于jquery 实现导航条高亮显示的两种方法EasyUI使用DataGrid实现动态列数据绑定Vue怎么通过JSX动态渲染组件JS 获取当前日期、时间、星期聊一聊Node.js中的 GC(垃圾回收)机制Ajax 请求队列解决方案并结合elementUi做全局加载状态前端代码风格规范总结JS Generator函数yield表达式示例详解javascript子窗口父窗口相互操作 取值赋值的问题CSS如何实现波浪效果ECharts实现数据超出Y轴最大值max但不隐藏CSS样式穿透的几种方法JavaScript 类型转换CSS 设置页面缩放如何在Vue3+Vite中使用JSXlinux平台下node cnpm的安装方法vue中v-if和v-for的区别是什么详解Vue PC端如何实现扫码登录功能CSS 网格(Grid)布局JavaScript 请求服务端接口Angular开发问题记录:组件拿不到@Input输入属性聊一聊CSS中的盒模型和box-sizing属性vue3.0对服务端进行渲染Web 页面如何实现动画效果移动端 H5 实现拍照功能的几种方法CSS 样式优先级HTML 块级元素、行内元素和行内块级元素深入聊一聊vue3中的reactive()CSS 媒体查询Angular中的路由(Routing)原理怎么移除css的hover事件让交互更加生动!巧用CSS实现鼠标跟随 3D 旋转效果Web页面的几种布局方式JavaScript 评测代码运行速度的几种方法优化jQuery性能的多种方法(整理总结)说一下Vue组件中的自定义事件和全局事件总线列举一下JavaScript中对数组进行合并的几种方法JavaScript 对象合并带你深入了解一下vue.js中的this.$nextTick!如何在JavaScript中对文件进行处理Vue.js 前端项目在常见 Web 服务器上的部署配置vue中$set的实现方法CSS 实现文本装饰效果JavaScript 高阶函数History 和 Hash 路由模式Vue3学习之深度剖析CSS Modules和ScopeCSS 清除浮动CSS 设置背景图片【整理分享】一些常见Vue面试题(附答案解析)CSS里面的transform 属性CSS中的几种尺寸单位总结JavaScript中的条件判断与比较运算uni-app 滚动通知组件的实现JavaScript 执行上下文与作用域前端兼容性问题总结前端性能优化——图片优化JS中数组去重的几种方法JavaScript里实现继承的几种方式JavaScript使用reduce方法实现简单的 i18n 功能JavaScript 日期和时间的格式化大汇总(收集)JS里的原始值与引用值JavaScript 文件处理检测js代码中可能导致内存泄漏的工具Angular学习之ControlValueAccessor接口详解uni-app 日历组件的实现Vue 组件之间传值JavaScript里的回调函数属于闭包吗?JavaScript 解决冒泡事件导致的性能问题总结一下JavaScript中的一些奇怪问题简单说一下JavaScript中的事件冒泡和事件捕获关于 WebpackJavaScript中的循环类型5个实用的TypeScript操作符,助你提升开发能力!HTML img 元素无法显示 base64 图片的可能原因jQuery 遍历方法总结前端性能优化——内存问题javascript中脚本加载和执行机制Web 页面之间传递参数的几种方法解释一下JavaScript中0.1+0.2不等于0.3的问题总结一下JavaScript 中apply、call、bind的使用方法什么是EventLoop?怎么测试Node或页面的性能JavaScript 中 new Date(time).getTime() 获取时间戳方法在 iOS 中的兼容性问题JS里数组合并的几种方法详解vue各种权限控制与管理的实现思路uni-app 弹出层组件的实现用JavaScript实现文件的上传与下载前端性能优化总结简单说一下JavaScript中的事件委托JavaScript如何删除css总结一下JS中的排序算法关于js中的作用域和闭包让页面元素居中的一些方法【javascript算法】二分查找法如何在前端实现上万行大量数据的秒级响应?CSS中父元素被子元素的margin-top影响的解决方法js使用splice方法删除数组元素可能导致的问题如何运行vue项目(超详细图解)js隐式类型转换的副作用了解js的原型和原型链js中的循环引用js判断变量类型的方法web页面最常用的正则校验规则总结js内存管理和垃圾回收js中this关键字的作用和如何改变其上下文JS中的操作符和运算符大总结Vue3 watch 监听对象数组中对象的特定属性总结一下js的浅拷贝和深拷贝JavaScript中的异步编程JavaScript使用一个数组对另一个对象数组进行过滤一个基于Vue3实现的简单日历组件CSS实现磨砂玻璃(毛玻璃)效果样式解决“Vue3调用本地服务接口失败,老是提示下载并安装本地服务”的办法vue3基于组合式API使异步获取的数据对象具有响应性ASP.NET给前端动态添加修改CSS样式JS 标题 关键字在js中如何获取对象的长度了解一下js中的函数式编程Vue框架中监测数组变化的方法VUE html里的文本框只允许输入数字的两种方法分享几种js格式化金额的方法JavaScript的Promise同步处理js中的简写语法JavaScript 面向切面编程(AOP,装饰者模式)了解一下js的跨域问题谈一谈Vue怎么用extend动态创建组件Vue3实现印章徽章组件js中断 forEach 循环的几种方法vue3组件间怎么通信?简述一下通信方式CSS 设置文字间距CSS 网格(Grid)布局Vue3 实现模态框组件js处理扁平数组和树结构相互转换使用Vue和jsmind如何实现思维导图的历史版本控制和撤销/重做功能?Vue.js与ASP.NET的结合,实现企业级应用的开发和部署检查js中的字符串是否可以成为回文Vue.nextTick函数的用法及在异步更新中的应用关于js中0.1+0.2不等于0.3的问题使用JavaScript开发网页地图导航js中如何使用可选函数参数Vue与js的融合,如何编写现代化的前端应用关于Vue与服务器端的通信:如何实现登录鉴权Vue.js的响应式原理如何使用 FabricJS 禁用椭圆的居中旋转?使用JavaScript实现页面滑动切换效果移动端H5页面的缓存问题js里base64与file之间的转换分享一下利用Vue表单处理实现复杂表单布局如何使用CSS创建渐变阴影?如何在 JavaScript 中查看结构体数组?css的弹性布局(Flex布局)Vue统计图表的数据标签和数值显示技巧js实用工具方法库大总结使用Angular和MongoDB来构建具有登录功能的博客应用程序如何在Vue表单处理中实现表单字段的文件下载使用js开发交互式地图应用Vue.component函数的使用及如何创建局部组件css实现三角形的几种方法移动端H5实现自定义拍照界面如何在js中遍历对象jquery如何修改选中状态如何使用js对图像进行压缩js如何计算base64编码图片的大小关于Vue双向数据绑定原理详解Vue.filter函数及如何自定义过滤器列举一下js数组的reduce方法的一些应用如何在Vue表单处理中实现表单的条件渲染vue中的canvas插件js数组的reduce方法的一些应用VUE里使用虚拟DOM来优化更新流程canvas对象有哪些方法js中URL查询字符串(query string)的序列与反序列化如何使用 JavaScript/jQuery 为网站创建暗/亮模式?总结html5中常见的选择器Vue组件开发:工具提示组件的实现方法总结js中常见的层次选择器利用Vue2实现印章徽章组件Vue组件实战:列表组件开发js中如何将对象转换为数组Vue组件开发:地图组件实现方法如何将数据存储到 DOM 中?Vue实战:图片上传组件开发如何使用Vue实现可视化界面设计?vite+TypeScript+vue3+router4+Pinia+ElmPlus+axios+mock项目基本配置Vue组件库推荐:Ant Design Vue深度解析使用Vue实现弹窗效果React Query 数据库插件:与分布式系统的协作指南如何使用vue ui创建vue项目使用CSS的Positions布局打造响应式网页无感刷新页面(附可运行的前后端源码,前端vue,后端node)Css Flex 弹性布局中的换行与溢出处理方法Vue组件库推荐:Element UI深度解析分享一个用HTML、CSS和jQuery构建的漂亮的登录注册界面如何利用React和Sass实现可定制的前端样式如何在Vue中实现拖拽上传文件vue3+TypeScript全局事件总线mitt分享一个Pinia存储的数据持久化插件HTML、CSS和jQuery:实现图片折叠展开的效果如何使用HTML和CSS创建动画条形图?如何利用React和Flutter构建跨平台移动应用用html、css和jQuery实现图片翻页的特效利用Promise优化Vue异步操作的方法CSS Positions布局与网页导航的优化技巧js多图合成一张图CSS3实现动态旋转加载样式使用Velocity.js将动画添加到网页使用FabricJS创建Image对象的JSON表示vue3递归组件---树形组件vue3+TypeScript全局事件总线mitt在Vue中实现可编辑的表格vue3+TypeScript自定义指令:长按触发绑定的函数Vue中如何处理表单数据的双向绑定和验证Vue 简介Vue 安装Vue 常用指令Vue 实例Vue 计算属性Vue 动态样式绑定Vue 事件处理Vue 侦听器Vue 数据双向绑定Vue过渡 & 动画Vue 实例生命周期Vue 插槽的使用Vue 组件基础Vue动态组件 & keep-aliveVue 组件间通信Vue 过滤器Vue 自定义指令Vue 混入 MixinsVue 插件Vue 渲染函数VueRouter 编程式导航VueRouter 路由嵌套VueRouter 基础应用VueRouter 命名视图VueRouter 命名路由Vuex 简介、安装VueRouter 路由传参VueRouter 路由别名、重定向Vuex GetterVuex StateVuex ActionVuex MutationVue-Cli & VueDevTools安装Vuex ModulesVue 第三方库的使用Vue-Cli 项目文件结构分析Vue 本地 Mock 数据Vue 项目打包部署Element 美化 TODO 项目

Vuex Getter

Getter

1. 前言

本小节我们将介绍 Vuex 中 getter 的使用方式。包括如何定义 getter、使用 getter、辅助函数 mapGetters 的使用。Getter 在项目中的使用非常普通,学会使用 Getter 可以避免我们重复的通过 state 获取数据。同学们在学完本小节后可以多尝试写一些 Getter 来巩固本节的知识点。

2. 解释

Vuex 允许我们在 store 中定义 “getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,而且只有当它的依赖值发生了改变才会被重新计算。— 官方定义

我们可以把 Getter 理解成是封装好的获取数据的方法,在方法内部我们可以对 state 中的数据做一些相应的处理,最后返回我们想要的数据。

3. 用法

3.1 通过属性访问

Getter 接受 state 作为其第一个参数,我们可以对 state 中的数据做相应的处理,最终返回我们想要的数据:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-for="item in skillList" :key="item.name">{{item.name}}</div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.1.2/dist/vuex.js"></script>
<script type="text/javascript">
  const store = new Vuex.Store({
    state: {
      name: '句号',
      age: ,
      skill: [
        {name: 'Vue', type: },
        {name: 'React', type: },
        {name: 'JAVA', type: },
        {name: 'Webpack', type: },
        {name: 'Node', type: }
      ]
    },
    getters: {
      skillList: state => {
        return state.skill.filter(item => item.type === )
      }
    }
  })
  var vm = new Vue({
    el: '#app',
    store,
    computed: {
      skillList() {
        return this.$store.getters.skillList
      }
    }
  })
</script>
</html>

代码解释:
JS 代码第 16-20 行,我们定义了 Getter 方法 skillList,skillList 内部我们返回状态 skill 中 type 为 1 的数据。
JS 代码第 26-28 行,我们通过 $store.getters 获取 skillList 的返回值。

Getter 也可以接受其他 getter 作为第二个参数:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-for="item in skillList" :key="item.name">{{item.name}}</div>
    <div>我有 {{count}} 个技能包</div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.1.2/dist/vuex.js"></script>
<script type="text/javascript">
  const store = new Vuex.Store({
    state: {
      name: '句号',
      age: ,
      skill: [
        {name: 'Vue', type: },
        {name: 'React', type: },
        {name: 'JAVA', type: },
        {name: 'Webpack', type: },
        {name: 'Node', type: }
      ]
    },
    getters: {
      skillList: state => {
        return state.skill.filter(item => item.type === )
      },
      skillCount: (state, getters) => {
        return getters.skillList.length
      },
    }
  })
  var vm = new Vue({
    el: '#app',
    store,
    computed: {
      skillList() {
        return this.$store.getters.skillList
      },
      count() {
        return this.$store.getters.skillCount
      }
    }
  })
</script>
</html>

代码解释
JS 代码第 16-23 行,我们定义了 Getter 方法 skillList 和 skillCount,skillList 内部我们返回 skill 数据 中 type 为 1 的数组,skillCount 内部我们通过 getters 获取 skillList 的数组长度。
JS 代码第 28-30 行,我们通过 $store.getters 获取 skillList 的返回值。
JS 代码第 31-33 行,我们通过 $store.getters 获取 skillCount 的返回值。

3.2 通过方法访问

在上一个例子中我们只能通过 skillList 获取 type 为 1 的数据列表,那么如果我想获取 type 为 2 的数据呢?同学们可能会说:我们在定义一个 skillList2 不就好了!确实这样可以满足需要,但是,如果又有 type = 3、type = 4 等等其他的呢?难道我们还要继续写 skillList3、skillList4 吗?
其实 getter 除了可以直接返回数据之外,也可以通过让 getter 返回一个函数,来实现给 getter 传参。在对 store 里的数组进行查询时非常有用。
示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-for="item in skillList" :key="item.name">{{item.name}}</div>
    <div>我有 {{count}} 个技能包</div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.1.2/dist/vuex.js"></script>
<script type="text/javascript">
  const store = new Vuex.Store({
    state: {
      name: '句号',
      age: ,
      skill: [
        {name: 'Vue', type: },
        {name: 'React', type: },
        {name: 'JAVA', type: },
        {name: 'Webpack', type: },
        {name: 'Node', type: }
      ]
    },
    getters: {
      skillList: state => (type) => {
        return state.skill.filter(item => item.type === type)
      },
      skillCount: (state, getters) => (type) => {
        return getters.skillList(type).length
      },
    }
  })
  var vm = new Vue({
    el: '#app',
    store,
    computed: {
      skillList() {
        return this.$store.getters.skillList()
      },
      count() {
        return this.$store.getters.skillCount()
      }
    }
  })
</script>
</html>

代码解释:
JS 代码第 17-19 行,我们定义了 Getter 方法 skillList,skillList 返回一个函数,该函数接收一个 type 参数,函数内部返回 state.skill 中对应 type 的数组。
JS 代码第 20-22 行,我们定义了 Getter 方法 skillCount,skillCount 返回一个函数,该函数接收一个 type 参数,函数内部获取 getters.skillList 的值,并返回数组长度。
JS 代码第 28-30 行,我们通过 $store.getters.skillList 传入参数 type 获取 skillList 的返回值。
JS 代码第 31-33 行,我们通过 $store.getters.skillCount 传入参数 type 获取 skillCount 的返回值。

4. mapGetters 辅助函数

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-for="item in skillList" :key="item.name">{{item.name}}</div>
    <div>我有 {{skillCount}} 个技能包</div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.1.2/dist/vuex.js"></script>
<script type="text/javascript">
  const store = new Vuex.Store({
    state: {
      name: '句号',
      age: ,
      skill: [
        {name: 'Vue', type: },
        {name: 'React', type: },
        {name: 'JAVA', type: },
        {name: 'Webpack', type: },
        {name: 'Node', type: }
      ]
    },
    getters: {
      skillList: state => {
        return state.skill.filter(item => item.type === )
      },
      skillCount: (state, getters)  => {
        return getters.skillList.length
      },
    }
  })
  var vm = new Vue({
    el: '#app',
    store,
    computed: {
      ...Vuex.mapGetters([
        'skillList',
        'skillCount'
      ])
    }
  })
</script>
</html>

代码解释:
JS 代码第 29-32 行我们通过 Vuex.mapGetters 获取 skillList 和 skillCount 的值。

如果你想将一个 getter 属性另取一个名字,可以使用对象形式:

Vuex.mapGetters({
  skillListAlias: 'skillList',
  skillCountAlias: 'skillCount'
})

5. 小结

本节,我们带大家学习了 Vuex 中 Getter 的使用方式。主要知识点有以下几点:

  • 在 store 中定义 Getter 数据。
  • 通过 $store.getter 访问 getter。
  • 通过让 getter 返回一个函数给 getter 传参。
  • 使用 mapGetters 辅助函数简化获取 getter 的写法。