1

アプリの状態を処理するために、プレゼンテーションを作成し、名前を付け、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 アクションが別のコンポーネントでトリガーされ、プレゼンテーション コンポーネント内の「保存」イベントを選択する方法がよくわからないため、シャドウ プレゼンテーションを更新できません。そのような機能をどのように実装できるかについて何か考えはありますか? どんな助けでも大歓迎です！前もって感謝します！

4

2 に答える 2

5

質問で尋ねたのとは異なる方法でこの問題を解決することになりましたが、一部の人にとっては興味深いかもしれません。だからここに行く：

最初に、vuex を使用するときはすべてのアプリの状態を vuex ストアで管理する必要があるため、vue ストアがイベントをコンポーネントに伝達することをやめました。私がしたことは、プレゼンテーションオブジェクトの構造を

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

このように、もう少し複雑なものに

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

presentation最初に持っていた単純なプレゼンテーション オブジェクトはどこにありますか。これで、新しいプレゼンテーション オブジェクトには、statesすべてのプレゼンテーション状態を配置するプロップがあり、この各状態には、文字列化された単純なプレゼンテーション オブジェクトと実際の単純なプレゼンテーション オブジェクトによって生成されたハッシュがあります。このように、プレゼンテーションのすべての変更に対して、異なるハッシュを使用して新しい状態を生成し、現在の状態ハッシュと最後に保存されたハッシュを比較できます。プレゼンテーションを保存するたびに、lastSaved小道具を現在の状態のハッシュに更新します。この構造を使用すると、状態をシフト解除/シフトするだけで、元に戻す/やり直し機能を簡単に実装できますstates。statesAhead逆もまた同様で、これは最初に意図した以上のものであり、最終的には、状態管理を断片化してコンポーネントを汚染する代わりに、すべての状態を vuex ストアで管理し続けました。

混乱しすぎず、誰かがこれを役に立てば幸いです。乾杯

于 2016-09-06T11:47:18.953 に答える