fix: fix reactivity bug in useProfile

mutoe · Nov 1, 2020 · e3a0441 · e3a0441
1 parent 7fe7872
commit e3a0441
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/src/composable/useProfile.ts b/src/composable/useProfile.ts
@@ -1,22 +1,24 @@
-import { reactive, watchEffect } from 'vue'
+import { ComputedRef, reactive, watch } from 'vue'
 
 import { getProfile } from '../services/profile/getProfile'
 
-export function useProfile (username: string) {
+interface UseProfileProps {
+  username: ComputedRef<string>
+}
+
+export function useProfile ({ username }: UseProfileProps) {
   const profile = reactive<Profile>({} as Profile)
 
   async function fetchProfile () {
-    const profileData = await getProfile(username)
+    const profileData = await getProfile(username.value)
     updateProfile(profileData)
   }
 
   async function updateProfile (profileData: Profile) {
     Object.assign(profile, profileData)
   }
 
-  watchEffect(() => {
-    fetchProfile()
-  })
+  watch(username, fetchProfile, { immediate: true })
 
   return {
     profile,

diff --git a/src/pages/Profile.vue b/src/pages/Profile.vue
@@ -88,7 +88,7 @@ export default defineComponent({
 
     const { user, isAuthorized } = store.user
 
-    const { profile, updateProfile } = useProfile(username.value)
+    const { profile, updateProfile } = useProfile({ username })
 
     const { followProcessGoing, toggleFollow } = useFollow({
       following: computed<boolean>(() => profile.following),