Question

我遇到了一个有趣的场景，在该场景中，我需要确切地知道使用哪些键来访问包装在代理中的对象中的深层嵌套属性。

例如：

form.user.address.city

Proxy包裹form的地方：

const form = new Proxy(source, ...)

是否有可能在set的{{1}}陷阱内知道Proxy嵌套在city下并且address嵌套在{{1 }}？

我不想做类似的事情：

address

公平地说，实际用例要复杂一些。

user实际上代表了const keys = [] set(target, prop, value, receiver) { if (typeof target[prop] === 'object') keys.push(prop) }存储区中的一个模块。

最初，该表单仅具有父级键，值对，并表示来自其他模块的字段的集合，这些模块可用于防止更改vuex存储自身中存在的数据。

因此，它可以完美地工作：

form

现在，此方法非常有效，因为它可以使用vuex模式：

const form = new Proxy(this.$store.getters['user'], {
  get: (target, prop) => {
    return _get(target, prop, undefined)
  },
  set: (target, prop, value) => {
    this.$store.commit('user/SET_VALUE', { [prop] : value })

    return true
  }
})

我将不必在商店中更改v-model，只需将所有更改确定在商店中的简单v-model="form.first_name"模块中即可。

这种方法的复杂性现在已经增长了十倍，并且该方法已在许多地方使用，但是现在我需要修改深层嵌套的属性。

这是我问题的根本原因。

进一步阐述-

我也实现了使用嵌套代理的模式，但是它不能解决我的问题，因为它只能向我显示该嵌套对象的属性，例如user陷阱变为：

form

get陷阱变为：

recursiveProxyGetter (target, prop) => {
  if (typeof target[prop] === 'object' && target[prop] !== null) {
    return new Proxy(target[prop], this.recursiveProxy)
  }
  return target[prop]
},

set在我的mixin上定义为简单属性的地方：

recursiveProxySetter(target, prop, value) => {
  if (typeof target[prop] === 'object' && target[prop] !== null) {
    return new Proxy(target[prop], this.recursiveProxy)
  }

  this.updateFormValue(prop, value)

  return true
}

表格就这样初始化了

recursiveProxy

获取用于访问对象中深层嵌套属性的所有键

0 个答案: