Question

我知道当我们为同一个实例创建新的属性时，对象的默认行为是它引用旧的，更改属性。

我的vue数据中有类似的内容：

export default {
    data() {
        return {
            paragraph: {
                text: "",
                fontSize: 14,
                key: "Paragraph",
                align: "left"
            }

        }
    },
    methods: {
        addParagraph() {
            this.$set(this.paragraph, 'key', this.paragraph.key);
            this.$set(this.paragraph, 'text', this.paragraph.text);
            this.$set(this.paragraph, 'fontSize', this.paragraph.fontSize);
            this.$set(this.paragraph, 'align', this.paragraph.align);
            this.$store.commit("appendToDocument", this.paragraph)
        },
        alignment(option) {
            this.paragraph.align = option;
        }
    }

每次我点击一个按钮，段落内的数据都会发生变化，我想把数据传递到vuex商店，把它添加到json中，所以我可以有一个段落的树，问题是，everttime我创建了一个新的paragrapg它改变了之前创建的其他段落的值，有没有办法改变它？

Answer 1

@Potray答案很好。但是如果你使用Babel和stage-3（扩展运算符），它可以更短。然后，您可以使用该语法复制所有属性

addParagraph() {
    this.$store.commit("appendToDocument", { ...this.paragraph })
},

Answer 2

试试这个：

 addParagraph() {
        var paragraph = {
           key: this.paragraph.key,
           text: this.paragraph.text,
           fontSize: this.paragraph.fontSize,
           align: this.paragraph.alignkey,
        }
        this.$store.commit("appendToDocument", paragraph)
    },

停止使用vuejs引用对象

2 个答案: