当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商店进行管理。 我所做的是将演示对象结构从

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

像这样更复杂

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

presentation是我最初拥有的简单演示对象。 现在，我的新演示文稿对象具有道具states ，我将在其中放置所有演示文稿状态，并且每个状态都具有由字符串化的简单演示文稿对象和实际的简单演示文稿对象生成的哈希。 这样，我将为演示文稿中的每个更改生成一个具有不同哈希值的新状态，然后将当前状态哈希值与保存的最后一个哈希值进行比较。 每当我保存演示文稿时，我都会将lastSaved更新为当前状态哈希。 通过这样的结构，我可以只通过unshifting /从换挡状态简单实现撤销/重做功能states来statesAhead ，反之亦然，这就是比我打算在第一和最后我存的vuex店管理的所有我的状态更改为分散我的状态管理和污染组件。

我希望这不会造成太多混乱，并且有人会觉得这很有帮助。 干杯

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

实作

从Vue组件调用上面的商店操作

this.updateUser({emailVerified: true})

宾语

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