本篇内容介绍了“JavaScript取值函数getter与存值函数setter怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
get和set是两个关键字,用于对某个属性设置存值函数和取值函数,拦截该属性的存取行为。
那么,这两个东西要怎么用呢?而且他们和我们的平日里写的业务又是怎么练习起来的呢?
首先,我们先看一段恩简单的代码:
var person={ myname:'' } person.myname='lsh' console.log(person.myname);
相信大家一眼就看出来了,控制台打印的结果是lsh,那么如果我们把它改写成取值函数和存执函数要怎么写呢?
代码如下:
var name = "" var person = { get myname() { console.log("我叫" + name) return name }, set myname(val) { console.log("我叫" + name) name = val }, } person.myname = "lsh" console.log(person.myname)
我们只需要使用对象.函数名就可以调用取值函数和取值函数了。
使用get与set函数有两个好处:
在读取或者设置对象的某一个属性的时候,可以进行拦截,中间可以进行其他的操作,比如处理一些业务逻辑
在vuex中对state中的数据进行缓存
可以装bei(在小白面前)
对于第一个好处上面已经演示过了,这里要解释一下第二个好处:
对于做过vue项目的同学,或许在store文件夹下的index.js
文件中见过下面的代码,下面的代码中就用到了get与set函数
export default new Vuex.Store({ state: { get UserToken() { return localStorage.getItem("token") }, set UserToken(value) { localStorage.setItem("token", value) }, }, mutations: { LOGIN_IN(state, token) { state.UserToken = token }, LOGIN_OUT(state) { state.UserToken = "" }, }, modules, })
这个东西出现在vuex中,vuex就是进行数据的集中式处理,可以是的数据进行全局访问的,那么为什么又要用到localstorage呢,那么又为什么要用get和set方法呢?
首先我们要明确一点在vuex中使用本地存储,目的并不是实现数据的共享(store已经实现了全局共享),而是实现vuex所管理的数据进行本地存储(众所周知,vuex存储的数据刷新页面后数据会丢失)。
如果我们将mutations的值些写为一个下面的这个样子,也是可以实现数据在全局的共性,一点也不耽误操作它:
但是有一个很重要的一点,刷新页面后usertoken就变成空了,为了解决这个问题,就必须使用本地存储,那么本地存储应该如何与vuex相结合起来呢,那就必须要用到下面的写法了,然后就用到了get与set函数了。
export default { get UserToken(){ return localStorage.getItem('token'); }, set UserToken(value){ localStorage.setItem('token',value) } }
然后就完美解决问题了。
最后代码就变成了这样子:
import Vue from 'vue' import Vuex from 'vuex' import state from "./defaultState" import mutations from "./mutations" import modules from "./modules" Vue.use(Vuex) export default new Vuex.Store({ state, mutations, modules })
“JavaScript取值函数getter与存值函数setter怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。