Vue Vuex 组件在商店更改时不更新

Question

我对 Vue Vuex 有反应性问题。我正在使用开源倒数计时器。在下面的代码中，当 $store 中的活动项目更改时，item.dueDate会正确反应（新日期显示在页面上），但是，传递给 Countdown 的数据不会更新。它保留旧值。不过，它第一次确实有效。所以，它没有更新。为什么不？谢谢！！

    <template>
        <v-layout>
            <v-flex>
                <v-card v-if="item">
                    <v-card-text>
                        <h3>Countdown {{item.name}} - {{item.dueDate}}</h3>
                    </v-card-text>
                    <Countdown v-if="item.dueDate" :deadline="item.dueDate"></Countdown>
                </v-card>
            </v-flex>
        </v-layout>
    </template>

    <script> 
    import Countdown from 'vuejs-countdown'

    export default {    
      components: { Countdown },
      computed: {
                activeItem(){
                return this.$store.getters.activeItem
            },
            item(){
                return this.$store.getters.loadedItem(this.activeItem)
            }
        }
    }
    </script>

Answer 1

问题出在我导入的倒计时模块上。当我打开它时，我明白了为什么该组件没有按预期更新。

倒计时模块仅在安装时设置一次数据

    mounted() {
        this.date = Math.trunc(moment(this.deadline) / 1000)
        }

因此，如果数据更改时组件保留在页面上，则它永远不会再次更新。我通过修改模块以添加更新的方法解决了这个问题，这解决了这个问题......

    updated() {
        this.date = Math.trunc(moment(this.deadline) / 1000)
        }

干杯，S