在nuxt布局函数中获取localStorage数据

// layouts/default.vue
<template>
  <div>
    <h1>Default Layout</h1>
    <p>User Name: {{ userName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userName: ''
    }
  },
  mounted() {
    this.fetchLocalStorageData();
  },
  methods: {
    fetchLocalStorageData() {
      const storedUserName = localStorage.getItem('userName');
      if (storedUserName) {
        this.userName = JSON.parse(storedUserName);
      }
    }
  }
}
</script>

const storedUserName = localStorage.getItem('userName');
if (storedUserName) {
  this.userName = JSON.parse(storedUserName);
} else {
  // 处理数据未找到的情况
  this.userName = 'Guest';
}

const storedUserName = localStorage.getItem('userName');
if (storedUserName) {
  try {
    this.userName = JSON.parse(storedUserName);
  } catch (e) {
    console.error('Failed to parse localStorage data:', e);
    this.userName = 'Guest';
  }
} else {
  this.userName = 'Guest';
}