Incorporating Vue-Router and Vuex, I have successfully implemented a Users Profile Component that fetches user information by extracting the username parameter from a router-link. For example,
<router-link :to="{name: 'user', params: { username: 'some.username'}}"></router-link>Vuex store action using the beforeRouteEnter guard. This action sends an AJAX request, retrieves the response, updates the state, and consequently refreshes the UI with the new user data.
However, I am now interested in incorporating subtle transformations or transitions to certain UI elements each time the user data changes. I am unsure of how to proceed with this enhancement.
BELOW IS THE USER PROFILE COMPONENT:
<template>
<v-container fluid>
<v-layout justify-center>
<v-flex v-if="user.data">
<v-avatar :size="100px" >
<img :src="user.data.img" alt="avatar">
</v-avatar>
<p>Hello, You Are {{ user.data.name }}</p>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import store from './vuex'
import { mapGetters } from 'vuex'
export default {
...
beforeRouteEnter (to, from, next) {
// call vuex ajax action to get user data and update state
next()
},
beforeRouteUpdate (to, from, next) {
// call vuex ajax action to get user data and update state
next()
},
beforeRouteLeave (to, from , next) {
// call vuex action to clear user state data
next()
}
computed: {
...mapGetters({ user : 'core/user' })
},
}
</script>
My current challenge involves implementing subtle transforms or transitions on the <v-avatar/> and other elements whenever a new user's data is fetched and the UI is updated. These effects could include scaling or opacity fading, similar to the Tumblr scale transition shown here: