vue中使用JS-Cookie

当我们构建一个前端的博客系统时，可能需要使用 cookie 来记录用户信息或者偏好设置。而在 Vue 中，我们可以通过导入第三方库

GitHub - js-cookie/js-cookie: A simple, lightweight JavaScript API for handling browser cookiesA simple, lightweight JavaScript API for handling browser cookies - GitHub - js-cookie/js-cookie: A simple, lightweight JavaScript API for handling browser cookieshttps://github.com/js-cookie/js-cookie

来方便地操作 cookie。接下来我们就来一步一步地实现在 Vue  中使用 JS-Cookie 来操作 cookie。

1. 安装JS-Cookie 

首先，在命令行中使用 npm 或 yarn 安装 JS-Cookie:

npm install js-cookie

# 或

yarn add js-cookie

2. 引入JS-Cookie

在需要使用 cookie 的组件中，我们需要先导入 JS-Cookie：

import Cookies from 'js-cookie';

然后，我们就可以在组件中使用 Cookies 对象了。

3. 设置cookie

使用 Cookies.set() 方法可以设置 cookie，接受三个参数：cookie 名称、cookie 值和可选的配置对象。

示例：

methods: {
  setCookie() {
    Cookies.set('username', 'tom', { expires: 7, path: '/', domain: 'localhost', secure: true, sameSite: 'strict' });
  }
}

这样就会设置一个名为 ‘username’ 的 cookie，值为 ‘tom’，过期时间为 7 天，路径为根路径 ‘/’，域名为 ‘localhost’，限制只能通过 HTTPS 访问，同站点发送。

4. 获取cookie

使用 Cookies.get() 方法可以获取 cookie，接受一个参数：cookie 名称。

示例：

computed: {
  getUsername() {
    return Cookies.get('username');
  }
}

这样就会返回名为 ‘username’ 的 cookie 的值。

5. 删除cookie

如果不再需要 cookie，可以使用 Cookies.remove() 方法将其删除，接受一个参数：cookie 名称。

示例：

methods: {
  removeCookie() {
    Cookies.remove('username');
  }
}

这样就会删除名为 ‘username’ 的 cookie。