您现在的位置是:首页 >
当前栏目
Vuex的使用(五)——mapGetters的定义和用法[通俗易懂]
使用 通俗易懂 用法 定义 Vuex mapGetters
2023-06-13 09:11:43 时间
大家好,又见面了,我是你们的朋友全栈君。
参考文档:https://vuex.vuejs.org/zh/guide/
当需要在组件中使用多个getters时,可以利用mapGetters批量生成计算属性(新增文件路径为src\components\componentE.vue,可以通过切换示例中注释的计算变量来查看对应的页面效果),代码如下:
<template>
<div>
<span>mapGetters用法</span>
<br />
<span>getters in vuex:{
{param2}}</span>
</div>
</template>
<script> import {
mapGetters } from "vuex"; export default {
name: "component-e", // 基础写法,与state基本相同,唯一的区别是state在引用时用的是this.$store.state[xxx],getters在引用时用的是this.$store.getters[xxx] // computed: {
// param2() {
// return this.$store.getters["param2"]; // } // } // 要注意的是,Vuex禁止开发者在mapGetters中对getters进行二次处理,所以以下写法是不行的(如果业务缺失需要,则应该采用上面的基础写法),控制台会提示:unknown getter: getters => getters.param2 // computed: mapGetters({
// param2: getters => getters.param2 // }) // mapGetters允许的写法(这个写法无法对getters进行二次处理),与mapState基本相同,唯一的区别是需要import mapGetters,且创建的是mapGetters对象 // computed: mapGetters({
// param2: "param2" // }) // 与mapState一样mapGetters也允许简化写法 // computed: mapGetters(["param2"]) // 与局部计算变量混用(mapGetters与mapState混用时也需要按照以下写法定义state和getters) computed: {
computedParam() {
return "computedParam"; }, ...mapGetters(["param2"]) } }; </script>
<style scoped> </style>
引用上面创建的component-e查看效果(修改文件路径为src\main.js),代码如下:
import Vue from 'vue'
import store from './store'
import ComponentA from './components/ComponentA.vue'
import ComponentB from './components/ComponentB.vue'
import ComponentC from './components/ComponentC.vue'
import ComponentD from './components/ComponentD.vue'
import ComponentE from './components/ComponentE.vue'
new Vue({
el: '#app',
store,
components: {
ComponentA, ComponentB, ComponentC, ComponentD, ComponentE },
template: '<div><component-a></component-a><component-b></component-b><component-c></component-c><component-d></component-d><component-e></component-e></div>'
});
运行后查看页面可以看到示例代码中通过mapGetters生成的几种计算属性之间没有任何区别。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/142871.html原文链接:https://javaforall.cn
相关文章
- 使用 LaTeX 写数学公式
- java使用nio读写文件[通俗易懂]
- redis 客户端连接及常用命令使用[通俗易懂]
- Jenkins详细安装与构建部署使用教程[通俗易懂]
- Linux使用vi编辑文件 出现E325:ATTENTION错误
- 正確使用 SetCapture ReleaseCapture [譯]「建议收藏」
- glusterfs分布式文件存储搭建和使用[通俗易懂]
- 使用awk数组进行求和[通俗易懂]
- pythondecode函数的用法_如何使用python中的decode函数?[通俗易懂]
- linux上lrzsz工具的安装与使用[通俗易懂]
- 使用StopWatch计算耗时[通俗易懂]
- 使用@NotBlank应该添加什么依赖[通俗易懂]
- LaTeX 如何使用双引号,单引号[通俗易懂]
- shell IF语句的使用[通俗易懂]
- GO分析-GOseq的使用教程[通俗易懂]
- 使用google earth engine(GEE)提取2000年到2019年长江下游水体(河流、湖泊)数据[通俗易懂]
- JAVA枚举类型(Enum)的使用[通俗易懂]
- fabric使用
- Oracle 视图 DBA_APPLY_INSTANTIATED_OBJECTS 官方解释,作用,如何使用详细说明
- 使用Python MySQL模块实现数据库管理!(pythonmysql模块)
- Oracle 视图 DBA_QUEUE_SCHEDULES 官方解释,作用,如何使用详细说明
- 使用 tar 命令在Linux系统中打包与解包文件(linux中的tar命令)
- MSSQL中使用日期格式的技巧(mssql格式化日期)
- 使用Oracle触发器加强数据安全性(oracle触发器类型)
- 启动Linux系统:使用U盘引导启动(从u盘启动linux系统)
- 条件语句if在Linux系统中的使用(linux下if)
- 聪明的选择Oracle使用分区表(oracle 使用分区表)
- 命令使用sh脚本执行Redis命令的实践(sh脚本执行redis)
- fleaphpcrud操作之findByField函数的使用方法
- 概率的问题:使用递归与多次试验模拟的分析