vue3 cookie

// 使用 vue3 和 vue-cookies 来管理 Cookie

// 1. 安装 vue-cookies
// npm install vue-cookies

// 2. 在 main.js 中引入并使用
import { createApp } from 'vue';
import App from './App.vue';
import VueCookies from 'vue-cookies';

const app = createApp(App);
app.use(VueCookies);
app.mount('#app');

// 3. 在组件中使用
<template>
  <div>
    <button @click="setCookie">设置 Cookie</button>
    <button @click="getCookie">获取 Cookie</button>
    <button @click="deleteCookie">删除 Cookie</button>
  </div>
</template>

<script>
export default {
  methods: {
    setCookie() {
      // 设置一个名为 'user' 的 cookie，值为 'John Doe'，过期时间为 7 天
      this.$cookies.set('user', 'John Doe', '7d');
      console.log('Cookie 已设置');
    },
    getCookie() {
      // 获取名为 'user' 的 cookie
      const user = this.$cookies.get('user');
      console.log('获取的 Cookie:', user);
    },
    deleteCookie() {
      // 删除名为 'user' 的 cookie
      this.$cookies.remove('user');
      console.log('Cookie 已删除');
    }
  }
};
</script>

解释说明：

1. 安装 vue-cookies：首先需要通过 npm 安装 vue-cookies 插件。
2. 在 main.js 中引入并使用：将 VueCookies 注册到 Vue 应用中，以便在所有组件中可以使用 $cookies。
3. 在组件中使用：
   • this.$cookies.set(key, value, expires)：设置一个 cookie，expires 可以是时间字符串（如 '7d' 表示 7 天）或日期对象。
   • this.$cookies.get(key)：获取指定名称的 cookie 值。
   • this.$cookies.remove(key)：删除指定名称的 cookie。