Vue Vuex Component Not Updating When Store Changes

Question

I am having a reactivity gotcha with Vue Vuex. I'm using an open source countdown timer. In the code below item.dueDate reacts properly when the active item changes in the $store, (the new date shows on the page), however, the data passed to Countdown doesn't update. It holds the old value. It does work the first time, though. So, it's not updating. Why not? Thanks!!

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

I highly suggest you taking a look at this: vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats — Derek Pollard
Thanks Derek -- I've reviewed these already but I can't quite put together why reactivity is working on the render part of the page, but not the Countdown.... ie. {{item.dueDate}} renders properly when it changes in the store. But <Countdown :deadline="item.dueDate"> does not re-render — Sean Rasmussen
I was able to work around this by modifying the Countdown component to include an updated() function... — Sean Rasmussen
mapGetters is just shorthand for creating a computed property from the store, but when there's only a couple, I just do em manually.... — Sean Rasmussen

Sean Rasmussen Sean Rasmussen · Accepted Answer · 2018-01-15T13:50:59

The problem was with the Countdown module that I imported. When I opened it up, I saw why the component wasn't updating as expected.

The Countdown module sets the data only once on mounted

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

So, if the component stays on the page as data changes, then it never updates again. I solved this by modifying the module to add an updated method, which did the trick...

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

Cheers, S

Vue Vuex Component Not Updating When Store Changes

1 Answers