vue3使用cookie

Vue3中使用Cookie，通常会涉及到前端本地存储数据的需求，你可以通过JavaScript原生的`document.cookie` API来操作。以下是一个基本的例子：

// 设置Cookie
function setCookie(name, value, days) {
  const expires = new Date();
  expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
  document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires.toUTCString()}; path=/`;
}

// 获取Cookie
function getCookie(name) {
  const cookies = document.cookie.split(';');
  for (let i = 0; i < cookies.length; i++) {
    let cookiePair = cookies[i].trim().split('=');
    if (cookiePair[0] === name) {
      return decodeURIComponent(cookiePair[1]);
    }
  }
  return null;
}

// 删除Cookie
function removeCookie(name) {
  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/`;
}

然后在Vue组件中，你可以像这样调用这些函数：

data() {
  return {
    userToken: getCookie('userToken') || '',
  };
},
methods: {
  setUserToken(token) {
    setCookie('userToken', token, 7); // 设置过期时间为一周
  },
  logout() {
    removeCookie('userToken'); // 删除Cookie
  },
},
watch: {
  userToken(newToken) { /* 更新用户状态等 */ },
},