57、在 Vue 3 项目中引入 js-cookie 库

当后端接口返回响应时，若在响应头里设置了 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，你可以依据项目需求选择合适的引入方式。全局引入适合在多个组件频繁使用的场景，而局部引入则适用于仅在特定组件使用的情况。