JavaScript中getter与setter的用法及Vuex持久化实战

作者：小布丁

时间：2026-10-25

本文详解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的值定义为如下形式，同样可实现数据的全局共享，并不影响操作：

存取描述符getter与存取描述符setter

然而关键问题在于，刷新页面后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相关内容请参阅往期文章或继续浏览后续文章，感谢支持！