本文主要介绍vue3中使用vue3-cookies，包含OptionsAPI与CompositionAPI两种写法
一、首先，你需要安装Vue-Cookie。可以通过npm或yarn安装。在终端中运行以下命令：
npm install vue3-cookies --save
或者
yarn add vue3-cookies
二、在Vue应用程序的入口文件main.js中引入vue3-cookies （OptionsAPI写法）
2.1 main.js
import { createApp } from 'vue';
import App from './App.vue';
import VueCookies from 'vue3-cookies';
const app = createApp(App);
app.use(VueCookies);
app.mount('#app');
2.2 在Vue组件中使用vue3-cookies：
// MyComponent.vue
<script>
export default {
methods: {
setCookie() {
//设置cookie
this.$cookie.set('key', 'value');
},
getCookie() {
//获取cookie
const value = this.$cookie.get('key');
},
removeCookie() {
//移除cookie
this.$cookie.delete('key');
}
}
}
</script>
三、引入并使用vue3-cookies （CompositionAPI写法）
按需引入组件中，无需在main.js全局引入
// MyComponent.vue
<script setup>
import { useCookies } from "vue3-cookies";
const { cookies } = useCookies();
const setCookie=()=> {
//设置cookie
cookies.set('key', 'value');
}
const getCookie=()=> {
//获取cookie
const value = cookies.get('key');
}
const removeCookie=()=> {
//移除cookie
cookies.delete('key');
}
</script>
更多api请参考vue3-cookies官方文档： vue3-cookies -- npm
