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

Question

问题的一些背景

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

数据结构如下:

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

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

使用的模板示例

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

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

但是，当“objB”不存在时，它会崩溃，并出现常见的 JavaScript 错误，指出它无法获取未定义的“objB”，但这是正常的。

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

想法

为了应对崩溃:

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

VueJS 总是评估绑定(bind)值

我想到了这个解决方案:

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

但是，指令绑定(bind)“v-autocreate”不会首先被选取(使用调试器检查)。我没有找到与指令或属性加载顺序相关的文档。

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

我想达到这个目标，但我不确定这是否可能(我需要诸如指令上的预绑定(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