1.安裝vue-cookies

npm install vue-cookies -S

2.在main.js引入

import VueCookies from "vue-cookies"; Vue.use(VueCookies);

如圖：

3.在vue組件中使用(如果存入的是對象，需要先轉換為json字符串)

設置cookies

this.$cookies.set('fileInfoId', to.query.fileInfoId)

如果是在某個js，例如router.js下使用，如下引入使用即可

import cookies from "vue-cookies"; cookies.set('fileInfoId', to.query.fileInfoId)

4.獲取cookies

this.$cookies.get('fileInfoId')

5.刪除cookies

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

6.查看cookies

this.$cookies.isKey('fileInfoId') // return false or true

7.獲取所有cookies

this.$cookies.keys() // return a array

8.針對瀏覽器存在cookie，前端卻獲取不到的問題：

httpOnly默認為true打對號√情況下，禁止javascript操作cookie，導致獲取不到，可以讓后端設置false；

后端使用node+koa，種客戶端一個cookie，但是在客戶端內通過document.cookie獲取不了此cookie。經查是由于koa通過ctx.cookies.set(name, value, [options])種的cookie是自動默認帶httpOnly的，httpOnly是服務器可訪問 cookie, 默認是 true。禁止javascript操作cookie（為避免跨域腳本(xss)攻擊，通過javascript的document.cookie無法訪問帶有HttpOnly標記的cookie。）
所以通過在后端設置ctx.cookies.set(name, value, {httpOnly:false})關掉httponly即可。

js-cookie參考

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue-cookies使用方法，vue中使用获取cookie的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。