如何配置Vuex state使其仅可通过getter访问

方案1：闭包作用域封装私有变量 #

• 实现逻辑：在Vuex模块/Store定义的闭包作用域内声明变量，不把变量挂载到state对象上，仅在模块内部的getter、mutation、action中访问该变量
• 示例代码：

// 单独的Vuex模块文件
const privateVal = '仅内部可访问的私有变量'

export default {
  getters: {
    getPrivateVal: () => privateVal
  },
  mutations: {
    updatePrivateVal: (_, newVal) => {
      privateVal = newVal
    }
  }
}

• 特点：变量完全不会暴露在Vuex的state树中，外部无论通过store.state还是模块state都无法直接访问，是最严格的私有实现；如果需要响应式能力，可手动用Vue的ref/reactive封装该变量。

方案2：命名约定+运行时访问拦截 #

• 实现逻辑：给需要私有化的state变量加统一前缀（比如_），通过Vuex插件重写state的访问代理，拦截所有对带前缀变量的直接读写操作，抛出错误提示。
• 示例代码：

// 自定义Vuex拦截插件
const privateStateGuard = (store) => {
  store.state = new Proxy(store.state, {
    get(target, prop) {
      if (typeof prop === 'string' && prop.startsWith('_')) {
        throw new Error(`禁止直接访问私有变量${prop}，请使用对应getter获取`)
      }
      return Reflect.get(target, prop)
    },
    set(target, prop, val) {
      if (typeof prop === 'string' && prop.startsWith('_')) {
        throw new Error(`禁止直接修改私有变量${prop}，请使用对应mutation更新`)
      }
      return Reflect.set(target, prop, val)
    }
  })
}

// 注册插件到store
const store = createStore({
  state: {
    _privateVal: '带前缀的私有变量',
    publicVal: '公共变量'
  },
  getters: {
    getPrivateVal: state => state._privateVal
  },
  plugins: [privateStateGuard]
})

• 特点：保留了Vuex原生的响应式能力，无需额外处理响应式逻辑，适合需要变量变化触发视图更新的场景；属于运行时校验，建议配合团队开发规范一起使用。

方案3：TypeScript 编译阶段约束（TS项目适用） #

• 实现逻辑：通过TypeScript的类型定义，将私有变量从对外暴露的Store类型中移除，仅暴露允许访问的getter和公共方法，编译阶段就拦截非法访问。
• 示例代码：

interface InternalState {
  _privateVal: string
  publicVal: string
}

// 对外暴露的Store类型仅包含允许访问的内容
export type AppStore = Omit<Store<InternalState>, 'state'> & {
  getters: {
    getPrivateVal: string
    getPublicVal: string
  }
}

• 特点：没有运行时代码开销，编译阶段就能提示非法访问，和TS项目适配度高；仅能约束TS代码，建议搭配方案2的运行时拦截一起使用，覆盖JS代码的访问场景。

内容的提问来源于stack exchange，提问作者Lucas Venturini