refs are not automatically unwrapping in templates.

[yogeshgalav]

I have exported ref property from Auth.js->User

let User = ref(null);
let auth_user = localStorage.getItem("AuthUser");
if(auth_user) {
  User.value = JSON.parse(auth_user);
}
export default {
  User,
}

now when I use this User property anywhere in template I need to define

v-if="Auth.User.value"

instead of

v-if="Auth.User"

why is this occuring.
please help.

[liulinboyi]

Because the import value Auth is not reactive, when get the value, it will not trigger the get method and not unref in the get method.

You can use like flow:

playground

user.js

import { ref, reactive } from 'vue'

let User = ref(null);
let auth_user = localStorage.getItem("AuthUser");
if(auth_user) {
  User.value = JSON.parse(auth_user);
}
/*
export default ref({
  User,
})
*/

export default reactive({
  User,
})

App.vue

<script setup lang="ts">
import Auth from './user.js'
</script>

<template>
  <div v-if="Auth.User">
    {{ Auth.User }}
  </div>
</template>