详解Vue中如何进行状态持久化

// 存储数据
localStorage.setItem('key', 'value');
// 获取数据
localStorage.getItem('key');
// 删除数据
localStorage.removeItem('key');

<template>
  <div>
    <div>{{ count }}</div>
    <button @click="increment">+</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  mounted() {
    // 从LocalStorage中获取count的值
    const count = localStorage.getItem('count');
    if (count) {
      this.count = parseInt(count);
    }
  },
  methods: {
    increment() {
      this.count++;
      // 将count的值存储到LocalStorage中
      localStorage.setItem('count', this.count);
    }
  }
}
</script>

// 存储数据
sessionStorage.setItem('key', 'value');
// 获取数据
sessionStorage.getItem('key');
// 删除数据
sessionStorage.removeItem('key');

<template>
  <div>
    <div v-if="isLoggedIn">欢迎您，{{ username }}！</div>
    <div v-else>请登录</div>
    <label>用户名：</label>
    <input type="text" v-model="username">
    <label>密码：</label>
    <input type="password" v-model="password">
    <button @click="login">登录</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  computed: {
    isLoggedIn() {
      return sessionStorage.getItem('isLoggedIn') === 'true';
    }
  },
  methods: {
    login() {
      // 模拟登录验证
      if (this.username === 'admin' && this.password === '123456') {
        sessionStorage.setItem('isLoggedIn', true);
        sessionStorage.setItem('username', this.username);
      }
    }
  }
}
</script>