如何避免在外部 js class 文件中使用 Vue.set() 保留嵌套对象属性的反应性？

Question

我有这个组件：

<template>
    <div class="simple-editor">
        {{editor.view.toolbarManager.buttons}}
        <component
            v-for="(button, name) in editor.view.toolbarManager.buttons" 
            :is="button.component" 
            :options="button.options"
            :key="name"
        ></component></div>
//.......................

我正在尝试在 v-for 循环中使用 editor.view.toolbarManager.buttons。 Vue devtools 向我展示（针对以下所有 3 种情况）editor.view.toolbarManager.buttons 是一个对象并包含 4 个包含另一个对象的属性。

<script>
export default {
    data: function() {
    return {
        editor: new Editor({
            doc: this.value,
            init: this.init,
        }),
    }
    },

editor.view.toolbarManager.buttons 正在 Editor() class 的子 class 中填充动态导入的脚本，如下所示：

props.plugins.forEach(plugin => {
    this.plugins[plugin] = import(/* webpackMode: "eager" */ '../plugin/' + plugin);
});

我这样填写editor.view.toolbarManager.buttons：

// case 1: works fine as expected
Vue.set(this.buttons, name, {
    component,
    options,
});     

/* case 2: loses vue reactivity
var button = {};

button[name] = {
    component,
    options,
};

Object.assign(this.buttons, button);
*/

/* case 3: loses vue reactivity
this.buttons[name] = {
    component,
    options,
};
*/

下一个问题是：当我尝试在模板中呈现 {{editor.view.toolbarManager.buttons}} 时，我看到情况 2 和 3 的空对象如下所示：

{}

这意味着 vue 反应性被破坏了。 Editor() 是外部的 class 我不想将它绑定到 Vue。由于使用 splice/push 方法，Vue 的反应性对于数组的外部 classes 是很好的。是否存在保留 Vue 反应性的对象属性的类似方法？

Answer 1

哦！我搞砸了 Object.assign()。这是 Object.assign() 而不是 Vue.set():

的正确使用

var button = {};

button[name] = {
    component,
    options,
};

this.buttons = Object.assign({}, this.buttons, button);

这对我来说很好用。文档在这里 https://vuejs.org/v2/guide/reactivity.html#For-Objects :

// instead of `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

如何避免在外部 js class 文件中使用 Vue.set() 保留嵌套对象属性的反应性？

How to avoid using Vue.set() within external js class files preserving reactivity for nested object properties?

vue.js

vue-reactivity