Vue3 中如何使用 Cookie

在 Vue3 项目开发过程中，我们常常需要与 Cookie 进行交互，以此来存储用户信息、用户偏好设置等数据。那么，在 Vue3 里究竟该如何使用 Cookie 呢？

Vue3 本身并没有内置处理 Cookie 的方法，所以我们可以借助第三方库 js-cookie 来简化操作。使用前，需先安装它。在项目根目录下打开命令行工具，执行 npm install js-cookie 或 yarn add js-cookie 命令进行安装。

安装完成后，在需要使用 Cookie 的组件中引入 js-cookie。例如，在一个 Vue 组件里：

<script setup>
import Cookies from 'js-cookie'

// 设置 Cookie
const setMyCookie = () => {
  Cookies.set('username', 'JohnDoe', { expires: 1 })
}

// 获取 Cookie
const getMyCookie = () => {
  const username = Cookies.get('username')
  console.log(username)
}

// 删除 Cookie
const removeMyCookie = () => {
  Cookies.remove('username')
}
</script>

<template>
  <div>
    <button @click="setMyCookie">设置 Cookie</button>
    <button @click="getMyCookie">获取 Cookie</button>
    <button @click="removeMyCookie">删除 Cookie</button>
  </div>
</template>

在上述代码中，Cookies.set 方法用于设置一个名为 username 的 Cookie，值为 JohnDoe，并设置该 Cookie 在 1 天后过期。Cookies.get 方法用于获取指定名称的 Cookie 的值，并将其打印到控制台。Cookies.remove 方法则是删除指定名称的 Cookie。

除了这种在组件内直接使用的方式，我们还可以将这些操作封装成一个独立的函数库。比如，在项目中创建一个 cookieUtils.js 文件：

import Cookies from 'js-cookie'

export const setCookie = (name, value, options) => {
  Cookies.set(name, value, options)
}

export const getCookie = (name) => {
  return Cookies.get(name)
}

export const removeCookie = (name) => {
  Cookies.remove(name)
}

然后在组件中引入并使用这些封装好的函数：

<script setup>
import { setCookie, getCookie, removeCookie } from './cookieUtils.js'

const setNewCookie = () => {
  setCookie('userRole', 'admin', { expires: 7 })
}

const getUserRole = () => {
  const role = getCookie('userRole')
  console.log(role)
}

const clearUserRole = () => {
  removeCookie('userRole')
}
</script>

<template>
  <div>
    <button @click="setNewCookie">设置新 Cookie</button>
    <button @click="getUserRole">获取用户角色</button>
    <button @click="clearUserRole">清除用户角色</button>
  </div>
</template>

通过这种方式，我们的代码结构更加清晰，也方便在多个组件中复用 Cookie 操作逻辑。掌握 Vue3 中 Cookie 的使用方法，能让我们更好地管理用户相关数据，提升用户体验。