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是我最初的简单表示对象。现在我的新表示对象有一个prop states，我将放置所有的表示状态，每个状态都有一个由字符串化的简单表示对象和实际的简单表示对象生成的哈希。像这样我会为presention中的每个更改生成一个具有不同散列的新状态，然后我可以将我当前的状态散列与保存的最后一个状态散列进行比较。每当我保存演示文稿时，我都会将lastSaved道具更新为当前状态哈希。通过这种结构，我可以简单地通过将状态从states移位到statesAhead来简单地实现撤消/重做功能，反之亦然，这甚至超过了我的预期，最后我保留所有我的状态由vuex商店管理，而不是分割我的状态管理和污染组件。

我希望它不会太混乱，而且有人觉得这很有帮助。干杯

Answer 2

我在尝试向用户状态添加新属性时遇到了这个问题，所以我最终得到了这个并且效果很好。

Vuex商店中的操作

"insecure-registries": []

<强>实施

从Vue组件

调用上面的商店操作

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

如何在Vuex存储状态更改时更新Vue组件属性？

2 个答案: