vue set-cookie

在 Vue 中设置 cookie 可以使用 JavaScript 中的 `document.cookie`，但是这种方式有一些限制，比如设置 cookie 的有效期、域名、路径等信息较为麻烦。因此，我们可以使用第三方库 `js-cookie` 来方便地设置和读取 cookie。

首先，需要安装 `js-cookie`：

npm install js-cookie --save

然后，在需要设置 cookie 的地方，可以使用如下代码：

import Cookies from 'js-cookie'

Cookies.set('name', 'value', { expires: 7, path: '/' })

其中，`name` 为 cookie 的名称，`value` 为 cookie 的值，`{ expires: 7, path: '/' }` 是可选参数，用于设置 cookie 的有效期和路径等信息。

要获取 cookie 的值，可以使用如下代码：

import Cookies from 'js-cookie'

const value = Cookies.get('name')

其中，`name` 为 cookie 的名称，`value` 为 cookie 的值。

需要注意的是，由于浏览器的安全策略，只有在同一个域名下设置的 cookie 才能被读取。因此，在设置 cookie 时，需要注意设置正确的域名和路径等信息。

相关问题

vue js-cookie转义字符

如果你想在Vue.js中使用js-cookie库来设置cookie值并包含转义字符，则需要使用encodeURIComponent()函数来编码cookie值。例如，如果你想设置一个名为"my_cookie"的cookie，它的值包含一个空格和一个等号，你可以使用以下代码：

import Cookies from 'js-cookie'

Cookies.set('my_cookie', encodeURIComponent(' = '))

这将把值编码为"%20%3D%20"，以便正确地设置cookie。

vue 获取响应头里set-cookie的值

可以通过在axios请求中设置`withCredentials: true`来获取响应头里的set-cookie值，具体代码如下：

axios.get('/api/getData', {
  withCredentials: true
}).then(res => {
  console.log(res.headers['set-cookie'])
}).catch(err => {
  console.log(err)
})

其中，`res.headers['set-cookie']`表示获取响应头里的set-cookie值。需要注意的是，如果后端设置了Access-Control-Allow-Origin为*，则无法获取set-cookie值，需要将其设置为具体的域名。