sign store

components/i/UserInfo.vue

@@ -3,9 +3,10 @@
         <div class="flex flex-grow">
             <UDropdown class="flex flex-grow" :items="items">
                 <UButton class="flex flex-grow gap-2" color="gray" variant="ghost">
-                    <UAvatar src="https://csdn-665-inscode.s3.cn-north-1.jdcloud-oss.com/inscode/202303/622eda98dfef6c4fdb84ccca/1680089871598-75919715-hvlk99ddLLhyNTXtl4TaQAgeFBFz4ZGD/avatar" />
-                    <div>Aresn</div>
-                    <UBadge size="xs" color="purple" variant="soft" label="PRO" />
+                    <UAvatar :src="$info.avatar" />
+                    <div>{{ $info.name }}</div>
+                    <UBadge v-if="$info.pro" size="xs" color="purple" variant="soft" label="PRO" />
+                    <UBadge v-else size="xs" color="gray" variant="soft" label="FREE" />
                     <UIcon name="i-heroicons-chevron-down-20-solid" />
                 </UButton>
             </UDropdown>
@@ -19,6 +20,7 @@
     </div>
 </template>
 <script setup>
+const { $isSignIn, $info } = useUserStore()
 const colorMode = useColorMode()
 const isDark = computed({
     get () {

stores/user.js

 import { defineStore } from 'pinia'
 
 export const useUserStore = defineStore('user', () => {
-    const info = ref({
+    const $info = ref({
         name: 'Aresn',
         avatar: 'https://csdn-665-inscode.s3.cn-north-1.jdcloud-oss.com/inscode/202303/622eda98dfef6c4fdb84ccca/1680089871598-75919715-hvlk99ddLLhyNTXtl4TaQAgeFBFz4ZGD/avatar',
-        pro: 0
+        pro: 1
     })
 
-    return { info }
+    const $isSignIn = ref(false)
+
+    return { $info, $isSignIn }
 })