Vuexストアの状態が変更された場合、Vueコンポーネントのプロパティを更新する方法は？

Question

プレゼンテーションを作成し、名前を付けたり、Vue jsやVuexでスライドを追加/削除したりしてアプリの状態を処理できるシンプルなプレゼンテーションツールを構築しています。すべてがうまくいっていますが、プレゼンテーションの変更（タイトルの変更やスライドの追加/削除）の変更を検出する機能を実装しようとしていますが、まだそれに適したソリューションを見つけることができませんでした。わかりやすくするためにタイトルの変更についてのみ例を挙げます。今私が持っている私のVuex店に：私は私のプレゼンテーションコンポーネントで

const state = { 
    presentations: handover.presentations, //array of objects that comes from the DB 
    currentPresentation: handover.presentations[0] 
} 

：

export default { 
    template: '#presentation', 
    props: ['presentation'], 
    data:() => { 
     return { 
      shadowPresentation: '' 
     } 
    }, 
    computed: { 
     isSelected() { 
      if (this.getSelectedPresentation !== null) { 
       return this.presentation === this.getSelectedPresentation 
      } 
      return false 
     }, 
     hasChanged() { 
      if (this.shadowPresentation.title !== this.presentation.title) { 
       return true 
      } 
      return false 
     }, 
     ...mapGetters(['getSelectedPresentation']) 
    }, 
    methods: mapActions({ 
     selectPresentation: 'selectPresentation' 
    }), 
    created() { 
     const self = this 
     self.shadowPresentation = { 
      title: self.presentation.title, 
      slides: [] 
     } 

     self.presentation.slides.forEach(item => { 
      self.shadowPresentation.slides.push(item) 
     }) 
    } 
} 

私がこれまでにやったことはコンポーネントがあるときに私のプレゼンテーションのシャドウコピーを作成することです作成され、計算されたプロパティの方法で私が興味を持っているプロパティ（この場合はタイトル）を比較し、何かが異なる場合はtrueを返します。これは変更を検出するために機能しますが、私がしたいのは、プレゼンテーションが保存されているときにシャドウプレゼンテーションを更新できるようにすることです。 savePresentationアクションが別のコンポーネントでトリガされているため、プレゼンテーションコンポーネント内で 'save'イベントを選択する方法がわからないため、シャドウプレゼンテーションを更新できません。どのように私はそのような機能を実装することができますか？どんな助けでも大歓迎です！前もって感謝します！

Answer 1

私は質問で尋ねたものとは異なる方法でこの問題を解決しましたが、いくつかの点で興味があるかもしれません。

最初に、私は自分のvueストアがコンポーネントとイベントをやりとりするのを断念しました。なぜなら、vuexを使用するときは、すべてのアプリケーション状態をvuexストアで管理する必要があるからです。私がやったことはpresentationは私が最初に持っていた簡単なプレゼンテーションオブジェクトである。この

{ 
    states: [{ 
     hash: md5(JSON.stringify(presentation)), 
     content: presentation 
    }], 
    statesAhead: [], 
    lastSaved: md5(JSON.stringify(presentation)) 
} 

のように、何かをもう少し複雑に

{ 
    title: 'title', 
    slides: [] 
} 

からプレゼンテーションオブジェクトの構造を変更することでした。今私の新しいプレゼンテーションオブジェクトは、statesの小道具を持っています。プレゼンテーションステートはすべて入れてあり、各ステートは、ストリング付き単純プレゼンテーションオブジェクトと実際のシンプルなプレゼンテーションオブジェクトによって生成されたハッシュを持っています。このように私は、プレゼンテーションのすべての変更が別のハッシュで新しい状態を生成し、次に私の現在の状態のハッシュを最後に保存されたものと比較することができます。プレゼンテーションを保存するたびに、lastSaved小道具を現在の状態のハッシュに更新します。この構造では、statesからstatesAheadへの状態のシフト/シフトだけで簡単にアンドゥ/リドゥ機能を実装することができました。私の状態管理と汚染成分を断片化しています。

あまりにも紛らわしいことではなく、誰かがこれを参考にしてくれたらと思います。 乾杯する

Answer 2

私のユーザー状態に新しいプロパティを追加しようとしたときにこの問題が発生したので、これでうまくいきました。

Vuexストアのアクション

updateUser (state, newObj) { 
     if (!state.user) { 
     state.user = {} 
     } 
     for (var propertyName in newObj) { 
     if (newObj.hasOwnProperty(propertyName)) { 
      //updates store state 
      Vue.set(state.user, propertyName, newObj[propertyName]) 
     } 
     } 
    } 

実装

this.updateUser({emailVerified: true}) 

オブジェクト

Vueのコンポーネントから上記のお店のアクションを呼び出します

{"user":{"emailVerified":true},"version":"1.0.0"}