vuejsを使ってオブジェクトを参照しないようにします

Question

同じインスタンスに対して新しい属性を作成するときのオブジェクトのデフォルト動作は、プロパティを変更して古いものを参照するということです。だから、私は段落の変更の内側にボタンをデータをクリックし

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; 
     } 
    } 

毎回、私はJSONに追加するストアをvuexするデータをPASたい：

私はVUEデータ上でこのような何かを持っています私はパラグラフの木を持つことができます、問題は、そのeverttime私は前に作成した私の他の段落の値を変更する新しいパラグラップを作成する、それを変更する方法はありますか？

Answer 1

@Potray答えは良いです。しかし、ステージ3（バーコードオペレータ）でBabelを使用している場合は、さらに短くなる可能性があります。その後、その構文ですべてのプロパティをコピーすることができます

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) 
    },