Vue3 LocalStorage ditetapkan selepas komponen diberikan

Question

Saya mempunyai bar navigasi yang memuatkan data pengguna, semua ini berlaku selepas pengguna berjaya log masuk ke apl. Masalahnya ialah, selepas memuatkan navbar, localStorage perlu ditetapkan sedikit. Jika saya membungkusnya dalam setTimeout() semuanya berfungsi dengan baik, tetapi saya lebih suka pembolehubah saya bersifat reaktif kerana ia boleh berubah berdasarkan aktiviti pengguna.

Toolbar.vue

<template>
  <!--begin::Toolbar wrapper-->
  <div class="d-flex align-items-stretch flex-shrink-0">
    <h2>check for value</h2>
    <div v-if="activeAccountId">{{activeAccountId}}</div>
  </div>
  <!--end::Toolbar wrapper-->
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "topbar",
  data() {
    let activeAccountId = ref(JSON.parse(localStorage.getItem('activeAccountId') || '{}')).value;

    return {
      activeAccountId
    }
  }
});
</script>

Saya telah mencuba menggunakan pemerhati, dan menggunakan setup() dan data() tetapi nampaknya tiada apa yang berfungsi dengan baik. Seperti yang saya nyatakan, setTimeout() berfungsi, tetapi saya lebih suka mengelak daripada mencetuskan tamat masa secara manual dan biarkan vue mengendalikan perkara mengikut kehendaknya.

Ini adalah contoh mudah, saya tidak boleh menyediakan bahagian kod palsu kerana ia tidak mempunyai set item Storan tempatan.

Untuk beberapa konteks tambahan, selepas pengguna log masuk, saya menggunakan async() untuk memanggil API untuk mendapatkan maklumat akaun dan menyimpan data akaun dalam localStorage. Saya meneka bahawa penghala cuba memuatkan kawasan bar navigasi, itulah sebabnya projek localStorage tidak tersedia apabila komponen dipasang.

Saya tidak tahu perkataan vue3 untuk digunakan, tetapi secara idealnya saya ingin mempunyai beberapa jenis panggilan async/menunggu ke localStorage kerana ref() nampaknya tidak berfungsi seperti yang saya fikirkan. Ia seperti ref() tidak melihat localStorage dikemas kini.

Penyegerakan localStorage adalah masalah utama.

Answer 1

Gunakan cangkuk kitaran hayat yang dipasang. Dan mulakan maklumat pengguna di sana