Vue中如何实现数据的缓存和本地存储

data() {
  return {
    userList: [], // 需要缓存的数据
  };
},

computed: {
  cachedUserList() {
    // 如果缓存中已有数据，直接返回缓存数据
    if (localStorage.getItem("userList")) {
      return JSON.parse(localStorage.getItem("userList"));
    } else {
      // 如果缓存中没有数据，发送网络请求获取数据
      // 并将数据缓存到本地存储
      axios.get("/api/userList").then((res) => {
        this.userList = res.data;
        localStorage.setItem("userList", JSON.stringify(res.data));
      });
      return this.userList;
    }
  },
},

<ul>
  <li v-for="user in cachedUserList" :key="user.id">{{ user.name }}</li>
</ul>

// 保存数据到本地存储
localStorage.setItem("username", "John");

// 从本地存储中获取数据
const username = localStorage.getItem("username");
console.log(username); // 输出：John

data() {
  return {
    username: "", // 需要保存到本地存储的数据
  };
},

created() {
  this.username = localStorage.getItem("username");
},

watch: {
  username(newUsername) {
    localStorage.setItem("username", newUsername);
  },
},