vuex中mapGetters的使用及简单实现原理
一.项目中的mapGetters
在Vue项目的开发过程中必然会使用到vuex,对vue项目公用数据进行管理,从而解决组件之间数据相互通信的问题,如果不使用vuex,那么一些非父子组件之间的数据通信将会变得极为繁琐。
1.这里首先说下项目中mapGetters的使用
先看下store部分目录结构
index.js文件
import Vue from 'vue'
import Vuex from 'vuex'
import book from './mudules/book'
import getters from './getters'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
book
},
getters
})
book.js文件
const book = {
state: {
number: 1
},
mutations: {
SET_NUMBER: (state, number) => {
state.number = number
}
},
actions: {
setNumber: ({commit, state}, number) => {
// console.log(state.number, number)
return commit('SET_NUMBER', number)
}
}
}
export default book
getters文件
const getters = {
number: state => state.book.number
}
export default getters
在vue组件中
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters(['number']),
},
mounted () {
this.$store.dispatch('setNumber',10).then(() => {
console.log(this.number)
})
}
}
通过引入mapGetters 我们就可以轻松的取到vuex中存储的数据,从代码中可以看出,getters就类似于vue组件中的computed(计算属性),在组件中引入mapGetters就是将vuex中的数据映射到组件的计算属性当中,在组件不多,组件的数据通信不是很多的时候这样写看似将简单的东西复杂化了,但是在稍复杂点的项目中这样会极大的减少工作量,及组件之间数据传递的复杂程度。
2.mapGetters简单实现原理
在上面的代码中可能很多人在项目中用到过,但是对于其原理可能不是很理解。
可能有一部人对于在组件计算属性中…mapGetters([‘number’]),不是很理解,下面就简单写一个方法实现类似的功能。
在组件中
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters(['number']),
//...fn(['a', 'b', 'c']) //需要实现这样一个方法传入一个数组
},
methods: {
menuClick (key) {
if (key === 0) {
this.$router.push('/ebook')
}else if (key === 1) {
this.$router.push('/datachart')
}else{
return
}
}
},
mounted () {
this.$store.dispatch('setNumber',10).then(() => {
console.log(this.number)
})
// console.log(this.a,this.b,this.c) // 在组件中可以直接通过this取到相应的值
}
}
我们在计算属性中添加
…fn([‘a’, ‘b’])
要求在组件中可以直接通过
this.a 和this.b 取到相应的值
const getters = {
a: () => 1,
b: () => 2,
c: () => 3
}
function fn (keys) {
const data = {}
keys.forEach(key => {
if (getters.hasOwnProperty(key)) {
data[key] = getters[key]
}
});
return data
}
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters(['number']),
...fn(['a', 'b', 'c'])
},
mounted () {
this.$store.dispatch('setNumber',10).then(() => {
console.log(this.number)
})
console.log(this.a,this.b,this.c)
}
}
打印结果为1,2,3
方法getters就类似于vuex中getters,
方法fn与vuex中的mapGetters有着相似的功能,其实在vuex的底层中也是使用这样类似的原理,这样看上去是不是简单很多。
---------------------
作者:丶叶修
来源:CSDN
原文:https://blog.csdn.net/qq_40701490/article/details/88794555
版权声明:本文为博主原创文章,转载请附上博文链接!
vuex中mapGetters的使用及简单实现原理的更多相关文章
- vuex 中关于 mapGetters 的作用
mapGetters 工具函数会将 store 中的 getter 映射到局部计算属性中.它的功能和 mapState 非常类似,我们来直接看它的实现: export function mapGett ...
- 组件 computed 与 vuex 中 getters 的使用,及 mapGetters 的使用,对象上追加属性,合并对象
vue 是响应式的数据,这一点相当的方便我们的操作,但有些错误的操作方法会 vue 的响应无效 除此之外我们还要了解 vue.set() 和 Object.assgin() 的使用 vue.set() ...
- vuex中的辅助函数 mapState,mapGetters, mapActions, mapMutations
1.导入辅助函数 导入mapState可以调用vuex中state的数据 导入mapMutations可以调用vuex中mutations的方法 四个辅助函数 各自对应自己在vuex上的自己 2.ma ...
- VueX(vue状态管理)简单小实例
VueX:状态管理 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 核心模块:State. ...
- Electron-vue实战(三)— 如何在Vuex中管理Mock数据
Electron-vue实战(三)— 如何在Vuex中管理Mock数据 作者:狐狸家的鱼 本文链接:Vuex管理Mock数据 GitHub:sueRimn 在vuex中管理mock数据 关于vuex的 ...
- 【Vuex】mapGetters 辅助函数
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性: import { mapGetters } from 'vuex' export default { // ...
- vue之mapMutaions的使用 && vuex中 action 用法示例 && api.js的使用
vue之mapMutations的使用 我们通过Mutation来改变store中的state,方法往往是在子组件中使用 this.$store.commit(); 来实现,但是这样的缺点是不容易查看 ...
- vuex中module的命名空间概念
vuex中module的命名空间概念 默认情况下,模块内部的 action.mutation 和 getter 是注册在全局命名空间的. 弊端1:不同模块中有相同命名的mutations.action ...
- 循序渐进VUE+Element 前端应用开发(2)--- Vuex中的API、Store和View的使用
在我们开发Vue应用的时候,很多时候需要记录一些变量的内容,这些可以用来做界面状态的承载,也可以作为页面间交换数据的处理,处理这些内容可以归为Vuex的状态控制.例如我们往往前端需要访问后端数据,一般 ...
随机推荐
- read articles list
done 如何通俗易懂地解释卷积: https://www.zhihu.com/question/22298352/answer/637156871 如何通俗易懂地理解卷积神经网路: http://w ...
- [LeetCode] 31. Next Permutation 下一个排列
Implement next permutation, which rearranges numbers into the lexicographically next greater permuta ...
- 源码解读SLF4J绑定日志实现的原理
一.导读 我们使用log4j框架时,经常会用slf4j-api.在运行时,经常会遇到如下的错误提示: SLF4J: Class path contains multiple SLF4J binding ...
- java 声明并初始化整型变量
public class Sample { public static void main(String[] args) { int num; num = ; System.out.println(& ...
- AD域配置以及开发机加入AD域
1. windows server 2012 添加AD域 : https://www.cnblogs.com/chenjiangfeng/p/9706483.html 2. 配置成功后重启AD域服务器 ...
- 第23课 优先选用make系列函数
一. make系列函数 (一)三个make函数 1. std::make_shared:用于创建shared_ptr.GCC编译器中,其内部是通过调用std::allocate_shared来实现的. ...
- $scope里的$watch方法
一.$watch的作用 监听model,如果model发生变化,则触发某些事情. 二.$watch的格式 $scope. $watch(watchFn,watchAction,deepWatch); ...
- 【C++】STL各容器的实现,时间复杂度,适用情况分析
一.vector 1.概述 动态数组,在内存中具有连续的储存空间,在堆上分配内存,支持快速随机访问,在中间插入和删除慢,但在末尾插入和删除快 2.特点 1)拥有一段连续的内存空间,并且起始地址不变,因 ...
- Spring Boot 一个依赖搞定 session 共享,没有比这更简单的方案了!
有的人可能会觉得题目有点夸张,其实不夸张,题目没有使用任何修辞手法!认真读完本文,你就知道松哥说的是对的了! 在传统的单服务架构中,一般来说,只有一个服务器,那么不存在 Session 共享问题,但是 ...
- Java实习生入职测试
网络上一度流行的Java实习生入职测试题,可以看看. 1.String类为什么是final的. 2.JDK8的HashMap的源码,实现原理,底层结构 3.反射中,Class.forName和clas ...