Vue JS

Question

我有一个用户个人资料组件，并使用Vue-Router和Vuex，我可以通过抓取username中的router-link参数来获取用户信息，例如{ {1}}然后在<router-link :to="{name: 'user', params: { username: 'some.username'}}"></router-link>导航防护中，我调用一个发送AJAX请求的beforeRouteEnter商店操作，抓取响应并将其存储在我的状态中，这会更新UI每个用户。非常直截了当。

但是，我现在想要在每次将数据从用户更改为用户时对某些UI元素执行一些微妙的转换/转换，但我对如何执行此操作感到困惑。

这是我的用户资料组件：

Vuex

现在，我的困境是，每当获取新用户的数据并更新UI时，我想在<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> 和`元素上添加一些微妙的变换/转换，可能是缩放或不透明度淡入。像这样的tumblr规模转换：

Answer 1

您可以将<transition></transition>标记包裹在<v-avatar></v-avatar>标记周围。另请记住为<v-avatar/>标记设置密钥。

例如：

<v-avatar :key="user.name.data"></v-avatar>

这是为了确保在每次数据更改时触发转换。

有关Vue过渡的更多信息，请参阅docs。