JavaScript中getter与setter的用法及Vuex持久化实战
本文详解JavaScript中get和set关键字的用法，通过对比普通属性与存取器属性的差异，展示如何拦截属性读写。重点解析在Vue项目中利用getter/setter结合localStorage实现Vuex状态持久化的方案，解决刷新页面数据丢失的问题。
存取描述符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数据进行缓存处理。
- 可用于技术展示（在初级开发者面前）。
第一个优势已演示，此处需解释第二个优势：
具备vue项目经验的开发者，可能在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管理数据的本地持久化（解决刷新页面后数据丢失的问题）。
若将mutations的值定义为如下形式，同样可实现数据的全局共享，并不影响操作：
然而关键问题在于，刷新页面后usertoken将变为空。为解决此问题，必须结合本地存储，具体实现需采用如下写法，即应用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的详解到此结束，更多JS相关内容请参阅往期文章或继续浏览后续文章，感谢支持！
前端大屏自适应方案：缩放与视口单位对比
2026-10-31 18:19:27
前端大文件分片下载实现：基于localForage与Vue的完整方案
2026-10-31 16:11:47
Vue3 中使用 VueUse 实现指定区域全屏阅读功能
2026-10-31 13:55:05
基于Vue与Pinia实现页面Loading动画及请求拦截处理
2026-10-31 13:54:42
Vue封装Echarts通用组件：Vue2/Vue3 JS/TS三种模板及常用配置事件详解
2026-10-31 11:38:03
