vue中 js-cookie 用法

js-cookie是一个用于在浏览器中处理Cookie的轻量级JavaScript库 ，在Vue3项目中使用它，可以方便地进行Cookie的读取、写入和删除操作。下面介绍具体的使用步骤：

1. 安装js-cookie

在Vue3项目的根目录下，通过npm或yarn安装js-cookie：

• 使用npm

npm install js-cookie

• 使用yarn

yarn add js-cookie

2. 引入js-cookie

在需要使用js-cookie的Vue组件或文件中，引入js-cookie库：

import Cookies from 'js-cookie';

3. 写入Cookie

使用Cookies.set()方法可以写入Cookie，该方法接受两个必填参数：Cookie的名称和值，还可以接受一个可选的配置对象来设置Cookie的属性，如过期时间、路径、域名等。

// 基本用法，设置一个名为 'username'，值为 'John' 的Cookie
Cookies.set('username', 'John'); 

// 设置一个带有过期时间的Cookie，例如设置过期时间为7天
Cookies.set('token', 'abc123', { expires: 7 }); 

// 设置带有路径的Cookie，只有在指定路径及其子路径下的页面才能访问该Cookie
Cookies.set('userInfo', { name: 'Alice', age: 30 }, { path: '/profile' }); 

4. 读取Cookie

使用Cookies.get()方法读取Cookie，该方法接受Cookie的名称作为参数，如果Cookie存在则返回其值，否则返回undefined。

// 读取名为 'username' 的Cookie
const username = Cookies.get('username'); 
console.log(username); 

// 读取所有Cookie，返回一个包含所有Cookie键值对的对象
const allCookies = Cookies.get(); 
console.log(allCookies); 

5. 删除Cookie

使用Cookies.remove()方法删除Cookie，该方法接受Cookie的名称作为参数，同时如果设置Cookie时指定了路径、域名等属性，删除时也需要传入相同的属性配置，才能正确删除对应的Cookie。

// 删除名为 'username' 的Cookie
Cookies.remove('username'); 

// 删除带有路径的Cookie，需要传入相同的路径配置
Cookies.remove('userInfo', { path: '/profile' }); 

6. 在Vue3组件中使用示例

<template>
  <div>
    <button @click="setCookie">设置Cookie</button>
    <button @click="getCookie">获取Cookie</button>
    <button @click="removeCookie">删除Cookie</button>
    <p v-if="cookieValue">{{ cookieValue }}</p>
  </div>
</template>

<script setup>
import Cookies from 'js-cookie';
import { ref } from 'vue';

const cookieValue = ref('');

const setCookie = () => {
  Cookies.set('testCookie', 'Hello, js-cookie!', { expires: 1 });
};

const getCookie = () => {
  const value = Cookies.get('testCookie');
  cookieValue.value = value || 'Cookie不存在';
};

const removeCookie = () => {
  Cookies.remove('testCookie');
  cookieValue.value = 'Cookie已删除';
};
</script>

以上代码展示了在Vue3项目中如何使用js-cookie进行Cookie的常见操作。通过合理运用js-cookie，可以方便地管理应用中的Cookie数据，实现用户状态管理、个性化设置等功能。