存储更改时 Vue Vuex 组件不更新答案

【问题标题】：Vue Vuex Component Not Updating When Store Changes存储更改时 Vue Vuex 组件不更新
【发布时间】：2018-06-14 17:45:01
【问题描述】：

我对 Vue Vuex 有反应性问题。我正在使用开源倒数计时器。在下面的代码中，item.dueDate 会在 $store 中的活动项目发生更改时做出正确反应（新日期显示在页面上），但是传递给 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>

【问题讨论】：

我强烈建议你看看这个：vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats
另外，vuex 注意 vue 的反应性：vuex.vuejs.org/en/…
谢谢 Derek -- 我已经查看了这些内容，但我不能完全总结为什么反应性在页面的渲染部分起作用，而不是倒计时......即。 {{item.dueDate}} 在商店中更改时正确呈现。但是不会重新渲染
我可以通过修改 Countdown 组件以包含一个 updated() 函数来解决这个问题...
mapGetters 只是从商店创建计算属性的简写，但是当只有一对时，我只是手动进行......

标签： vue.js vuex

【解决方案1】：

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

倒计时模块在mounted

上只设置一次数据

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

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

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

干杯，S

【讨论】：