当后端接口返回响应时，若在响应头里设置了 Set-Cookie 字段，浏览器会自动处理这些 cookie 并把它们存储起来。

1. 安装 js-cookie

你可以通过 npm 或者 yarn 来安装 js-cookie：

npm install js-cookie
# 或者
yarn add js-cookie

2. 在组件里引入并使用 js-cookie

以下给出两种使用方式：

全局引入

在 main.js 中全局引入 js-cookie，这样在所有组件里都能使用。

import { createApp } from 'vue';
import App from './App.vue';
import Cookies from 'js-cookie';

const app = createApp(App);
// 将 Cookies 挂载到全局
app.config.globalProperties.$cookies = Cookies;

app.mount('#app');   

在组件中使用：

<template>
  <div>
    <button @click="setCookie">设置 Cookie</button>
    <button @click="getCookie">获取 Cookie</button>
  </div>
</template>

<script setup>
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();

const setCookie = () => {
  proxy.$cookies.set('testCookie', 'Hello, js-cookie!');
};

const getCookie = () => {
  const value = proxy.$cookies.get('testCookie');
  console.log('Cookie 值:', value);
};
</script>    

局部引入

在需要使用 js-cookie 的组件中局部引入：

<template>
  <div>
    <button @click="setLocalCookie">设置局部 Cookie</button>
    <button @click="getLocalCookie">获取局部 Cookie</button>
  </div>
</template>

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

const setLocalCookie = () => {
  Cookies.set('localTestCookie', 'Local Hello, js-cookie!');
};

const getLocalCookie = () => {
  const value = Cookies.get('localTestCookie');
  console.log('局部 Cookie 值:', value);
};
</script>    

上述两种方式都能在 Vue 3 项目中使用 js-cookie，你可以依据项目需求选择合适的引入方式。全局引入适合在多个组件频繁使用的场景，而局部引入则适用于仅在特定组件使用的情况。