Skip to content

Instantly share code, notes, and snippets.

@adamb

adamb/About.vue

Last active Jun 16, 2020
Embed
What would you like to do?
Try vuex watch
<template>
<div class="about">
<h1>This is an about page</h1>
<template v-if="user.loggedIn">
<v-toolbar-title>Welcome {{ this.$store.getters.user.data.displayName }} </v-toolbar-title>
</template>
<template v-else>
<v-toolbar-title>Welcome</v-toolbar-title>
</template>
<v-card
class="mx-auto pa-3 ma-2 text-center"
max-width="400"
v-for="handle in handles"
:key="handle.id"
>
<v-row>
<v-col cols="8">
<v-list-item-title class="headline mb-1">{{ handle.name }}</v-list-item-title>
</v-col>
<v-col cols="4">
<v-btn icon color="red" @click="deleteHandle(handle.id)">
<v-icon>mdi-delete</v-icon>
</v-btn>
</v-col>
</v-row>
</v-card>
</div>
</template>
<script>
import { mapGetters } from "vuex"
import firebase from 'firebase/app'
import 'firebase/firestore'
export default {
data: () => ({
handle: 'test',
handles: [],
}),
watch: {
user: {
handler: function(newVal, oldVal) {
console.log('typeof %s, new user.id: %s, old: %s', typeof newVal, newVal.id, oldVal)
// typeof object, new user.id: undefined, old: Object
// need user.id so I can filter by id...
this.$bind('handles', firebase.firestore().collection('handles'))
},
// deep: true,
immediate: true,
},
},
created() {
this.unwatch = this.$store.watch(
(state, getters) => getters.user,
(newVal, oldVal) => {
console.log('Vuex value: %s, old: %s', newVal, oldVal)
// never fires!
// Do whatever makes sense now
},
)
},
mounted() {
console.log("mounted: " + this.user.data)
},
beforeUpdate() {
console.log("beforeUpdate:name " + this.user.data.displayName)
console.log("beforeUpdate:loggedIn " + this.user.loggedIn)
},
updated() {
console.log("updated: " + this.user.data.displayName)
},
beforeDestroy() {
console.log("beforeDestroy: " + this.user.data.displayName)
this.unwatch()
},
computed: {
// map `vm.user` to `vm.$store.getters.user`
...mapGetters({
user: "user"
})
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.