VueJS 自动创建嵌套对象属性以简化代码

Question

关于这个问题的一点背景

我已经构建了一个自定义系统来自动监视来自 nosql 数据库的 JSON 的一些“存储”属性。除了对象的嵌套（出于此处未讨论的几个原因需要）之外，没有什么太复杂的了。

数据结构如下：

{
    store: {
        objA: {
            objB: {
                prop1: 'some value'
            }
        }
    }
}

但是，由于它是一个提供该存储属性的 nosql 数据库，因此 objB 在从数据库加载后可能不存在。

使用的模板示例

我有自定义组件，这些组件的 props 直接绑定到该数据存储区

<my-selector :value.sync="store.objA.objB.prop1">
</my-selector>

但是，当“objB”不存在时，它会崩溃，通常的 javascript 错误表明它无法获取未定义的“objB”，但这是正常的。

我正在尝试找到一种 vuejs 方法来为我准备数据。

想法

为了应对崩溃：

• 在这种情况下，我不能使用 v-if 来屏蔽选择器。因为即使尚未设置数据也可以使用该选择器（例如：用于可选数据）。
• 我可以修复从数据库中获取数据的“加载”函数，以便在将数据分配给数据存储之前初始化所需的属性（如 objB）。但是，这意味着 我的初始 VueJS 数据 对象也将包含这些必需的属性。如果找不到任何替代解决方案，我可能会使用它，但我认为这不是最简单的方法，因为我必须在分配之前修复任何传入数据。
• 我的首选是创建一个指令（或模板中内置的任何其他内容），如果它们丢失，它将为我添加它们。

VueJS 总是评估绑定值

我想到了那个解决方案：

<my-selector v-autocreate="'store.objA.objB.prop1'" :value.sync="store.objA.objB.prop1">
</my-selector>

但是指令绑定“v-autocreate”没有首先被拾取（用调试器检查）。 我没有找到与指令或属性加载顺序相关的文档。

我还希望使用指令“bind”获取节点的所有绑定 函数以不重复字符串，但似乎我们无法获取该信息（我习惯于敲除js，我们可以选择分配给节点的所有绑定以表现不同）。

我想达到这个目标，但我不确定它是否可能（我需要类似 pre-bind / beforeBind 指令上的事件哈哈）：

<my-selector v-autocreate :value.sync="store.objA.objB.prop1">
</my-selector>

v-autocreate 将确保执行 vm.$set 的缺失属性。

Answer 1

您可以创建一个方法来检查对象路径中的每个属性，如果不存在则创建它，然后返回最后一个属性的值。

示例（未测试）：

get(object, path) {
    path = path.split('.')

    let index = 0
    const length = path.length
    let val
    while (object != null && index < length) {
        let key = path[index++]
        if(object[key] == null) {
            this.$set(object, key, {})
        }
        object = object[key]
    }
    return val
}

用法：

<my-selector :value="get(store,'objA.objB.prop1')">
</my-selector>

您可能对 lodash 的 get 函数感兴趣，这是代码示例所基于的。

https://github.com/lodash/lodash/blob/master/get.js