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

Question

我正在构建一个简单的演示工具，我可以在其中创建演示文稿、为它们命名并使用 Vue js 和 Vuex add/remove 幻灯片来处理应用程序状态。一切进展顺利，但现在我正在尝试实现一项功能，该功能可检测演示文稿中的更改（标题已更改或幻灯片 added/removed），但尚未找到合适的解决方案。为了简单起见，我将仅举有关标题更改的示例。现在在我的 Vuex 商店中我有：

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

在我的 Presentation 组件中我有：

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

到目前为止我所做的是在创建组件时创建演示文稿的卷影副本，然后通过计算属性比较我感兴趣的属性（在本例中的标题）和 return 如果有任何不同则为真。这适用于检测更改，但我想做的是能够在保存演示文稿时更新阴影演示文稿，但到目前为止我还没有做到。由于 savePresentation 操作在另一个组件中触发，而且我真的不知道如何在演示组件中选择 'save' 事件，所以我无法更新我的影子演示。关于如何实现此类功能的任何想法？任何帮助将不胜感激！提前致谢！

Answer 1

我最终解决这个问题的方式与我在问题中提出的方式不同，但某些人可能会感兴趣。所以这里是：

首先，我放弃了让我的 vue store 将事件传递给组件，因为当你使用 vuex 时，你应该让你的所有应用程序状态都由 vuex store 管理。我所做的是将表示对象结构从

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

有点复杂的东西，像这样

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

其中 presentation 是我最初拥有的简单表示对象。现在我的新演示对象有一个道具 states ，我将在其中放置我所有的演示状态，并且每个状态都有一个由字符串化的简单演示对象和实际的简单演示对象生成的散列。像这样，我将为演示中的每个更改生成一个具有不同哈希值的新状态，然后我可以将我当前的状态哈希值与上次保存的状态哈希值进行比较。每当我保存演示文稿时，我都会将 lastSaved 道具更新为当前状态哈希。有了这个结构，我可以简单地通过 unshifting/shifting 状态从 states 到 statesAhead 实现 undo/redo 特性，反之亦然，这甚至比我一开始和在最后，我将所有状态都由 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"}

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

How to update Vue component property when Vuex store state changes?

javascript

vue.js

vuex

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

How to update Vue component property when Vuex store state changes?

javascript

vue.js

vuex

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