vue3-cookies组件使用

npm安装

npm install vue3-cookies --save

引入 main.js

// 引入VueCookies
import VueCookies from 'vue3-cookies'
const app = createApp(App)
app.use(VueCookies)
// 添加到vue对象上，可以在全局通过 this.$cookies来调用
app.config.globalProperties.$cookies = VueCookies;
app.mount('#app')  // 挂载放最后

使用方式1

<script setup>
  // 因为在main.js中我们执行了app.use(VueCookies)，那么vue内部就会为vue对象绑定上cookie
  // 所以我们可以通过proxy.$cookies来操作cookie了
  // proxy相当于vue2中的this
  import {getCurrentInstance} from 'vue'
  const {proxy} = getCurrentInstance()
  // 设置cookie
  proxy.$cookies.set('k1', 'v1', '1h')
  // 获取
  console.log(proxy.$cookies.get('k1')) // v1
</script>

使用方式2

<script setup>
  import { useCookies } from "vue3-cookies";
  const { cookies } = useCookies();
  // 设置cookie
  cookies.set('k2', 'v2', '1h')
  // 获取
  console.log(cookies.get('k2')) // v2
</script>

时间单位，忽略大小写
y：年
m：月
d：日
h：小时
min：分
s：秒

示例：

<script lang="ts" setup>
import { useCookies } from "vue3-cookies";
const { cookies } = useCookies();
// 设置cookie 参数说明（ 关键值（keyName），参数值（value），过期时间（expireTimes））
cookies.set("name", "John","30d");//30天过期
cookies.set("name", "John",60 * 60 * 24);//直接传数字，1天过期
cookies.set("name1", "White");//不设置过期时间，默认是1天过期。
cookies.set("token1","123456", new Date(2020, 10, 01));//填写Date对象，明确指定过期时间
cookies.set("token2","123456", "Sat, 13 Mar 2017 12:25:57 GMT");// 填写一个时间字符串，指定过期时间
cookies.set("token3","123456","0");//浏览器会话结束时过期
cookies.set("token4","123456",-1); //永不过期
// 获取cookie
const n = cookies.get("name");//返回 John
const n1 = cookies.get("name1");//返回 White
console.log(n, n1);//返回 John,White,Petter
// 删除cookie
cookies.remove("name1");
// 判断cookie是否存在
const b1 = cookies.isKey("name");//返回 true
const b2 = cookies.isKey("name1");//返回 false
console.log(b1, b2);//返回 true，false
// 获取所有cookie的key
const allKeys = cookies.keys();
console.log(allKeys);// 返回 ["name"]
allKeys.forEach(k=>{
    console.log(k,cookies.get(k));
    // name John
});
</script>

特别说明：设置cookies时，传递的值不能是一个对象，必须将对象转换为字符串，但是获取cookies时，返回的是一个对象，可以直接调用对象的属性值。

<script lang="ts" setup>
import { useCookies } from "vue3-cookies";
const { cookies } = useCookies();
const ui = { name: "Mike", code: "1001" };
// ui 对象必须转换为字符串
cookies.set("ui", JSON.stringify(ui));
const ui_c = cookies.get("ui");//返回的是一个对象，可以直接调用属性
const ui_c: any = cookies.get("ui");
console.log("name", ui_c.name)
console.log("code", ui_c.code);
//返回
// name Mike
// code 1001 
</script>

发送请求携带cookie，axios的配置中设置withCredentials: true   // 必须指定这个参数，否则axios不能携带参数