javascript - Vue，Vuex：访问嵌套反应类中的私有属性

Question

给定以下 Vuex 状态：

{
  model: new Model
}

以下型号：

import { DataModel } from '@/foundation/data-model'
import { Child } from '@/models/child'

export class Model extends DataModel {
  static defaults = {
    name: null,
    child: new Child
  }

  constructor(payload = null) {
    super(Model.defaults)

    if (payload) this.hydrate({
      ...payload,
      child: new OtherModel(payload.child)
    })
  }
}

孩子：

import { DataModel } from '@/foundation/data-model'

export class Child extends DataModel {
  static defaults = {
    name: null
  }

  constructor(payload = null) {
    super(Child.defaults)
    this.hydrate(payload)
  }

  // other methods, setters, and getters.
}

和数据模型：

import { assign, cloneDeep } from 'lodash'

export class DataModel {
  #noHistory = false
  #originals = {}

  constructor(payload = null, noHistory = false) {
    this.#noHistory = noHistory
    this.hydrate(payload || {})
  }

  hydrate(payload = null, withOriginals = true) {
    if (!payload) return
    if (!payload instanceof Object) throw 'DataModel: payload is not an object'
    if (withOriginals && !this.noHistory) this.#originals = cloneDeep({ ...payload })

    assign(this, cloneDeep({ ...payload }))

    return this
  }

  get originals() {
    return this.#originals
  }

  // other getters and methods
}

为什么我可以#originals通过originalsroot访问model（在 Vuex 状态下），但model.child.#originals不能通过model.child.originals？

如果我尝试这样做，我会得到：

TypeError：试图在非实例上获取私有字段

model.originals // returns an object containing the original payload
model.child.originals // throws the TypeError

是否可能是由于 Vue 或 Vuex 包装对象以使其具有反应性的方式？如果是这样，为什么它只适用于model.child而不适用model，我该如何解决？

标签： javascriptvue.jsvuexvue-reactivity