当Vuex存储状态发生变化时，如何更新Vue组件属性

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

本文关键字：何更新 更新 属性 组件 Vue 状态 存储 Vuex 变化      更新时间：2023-09-26

我正在构建一个简单的演示工具，在这里我可以创建演示，命名和添加/删除幻灯片与Vue js和Vuex来处理应用程序的状态。一切都很顺利，但现在我正试图实现一个检测演示文稿变化的功能(标题更改或添加/删除幻灯片)，但还没有找到合适的解决方案。为了简单起见，我将只给出有关标题更改的示例。现在在我的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)
        })
    }
}
到目前为止，我所做的是在创建组件时创建演示文稿的影子副本，然后通过计算属性比较我感兴趣的属性(在本例中是标题)，如果有任何不同，则返回true。这用于检测更改，但我想做的是能够在保存演示文稿时更新阴影演示文稿，到目前为止我还没有做到这一点。由于savePresentation动作在另一个组件中触发，我真的不知道如何在演示组件中选择"保存"事件，所以我无法更新我的影子演示。关于如何实现这样的功能，有什么想法吗?任何帮助将非常感激!提前感谢!

我最终用一种不同于我在问题中提出的方法来解决这个问题，但它可能会引起一些人的兴趣。它是这样的:

首先，我放弃了让我的vue存储与组件通信事件，因为当你使用vuex时，你应该让所有的应用程序状态由vuex存储管理。我所做的是改变

的表示对象结构
{
    title: 'title',
    slides: []
}
把

变成更复杂的东西，比如

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

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

我希望这不是太混乱，有人觉得这是有帮助的。欢呼声

我在尝试添加新属性到我的用户状态时遇到了这个问题，所以我最终得到了这个，它工作得很好。

Vuex store中的动作 

   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组件调用上面的store操作

this.updateUser({emailVerified: true})


{"user":{"emailVerified":true},"version":"1.0.0"}
相关文章：