vue3 cookie

在Vue3中，可以使用vue-cookies插件来进行cookies的存储。首先，需要引入cookies并将其配置到Vue实例中。例如，在vue-cookies插件中，可以使用以下代码来配置cookies:

import cookies from 'vue-cookies'
Vue.prototype.$cookies = cookies;

接下来，在登录成功后，可以从后端获取到token，并将其存储在浏览器的cookie中。例如，可以使用以下代码将

相关问题

vue3使用 cookie

### 如何在 Vue 3 项目中使用 Cookie

为了管理用户的登录状态和其他持久化数据，在 Vue 3 中可以利用 `vue-cookie-next` 库来操作 cookie。这个库兼容 Vue 3 并提供了简单易用的方法来进行 cookie 的读取、写入以及删除。

安装所需的依赖可以通过 npm 或 yarn 完成：

npm install vue-cookie-next

或者

yarn add vue-cookie-next

接下来，初始化插件并配置到 Vue 实例中：

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

const app = createApp(App);
app.use(Cookies); // 注册插件
app.mount('#app');

现在可以在组件内部通过 `$cookies` 访问实例方法了。下面是一些常用的操作示例：

#### 设置一个新Cookie

设置一个新的 cookie 可以指定名称、值还有可选参数如过期时间等。

this.$cookies.set('user', JSON.stringify({ id: 1, name: "John Doe" }), {
    path: '/',
    expires: new Date(Date.now() + (7 * 24 * 60 * 60 * 1000)) // 一周有效期
});

#### 获取已存在的Cookie

获取之前存储的数据非常方便，只需要提供对应的 key 即可。

let userData = this.$cookies.get('user'); 
console.log(JSON.parse(userData)); // 输出对象形式的用户信息

#### 删除不再需要的Cookie

当某些情况下想要清除特定的 cookie 数据时，调用 remove 方法即可完成清理工作。

this.$cookies.remove('user');

除了上述基本功能外，还可以考虑集成更复杂的认证机制比如 OAuth 来增强应用的安全性和用户体验[^2]。

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) { /* 更新用户状态等 */ },
},