vue3中cookie如何使用

前言

cookie使用最多的地方想必是儲存使用者的帳號與密碼，可以避免使用者每次登入時都要重新輸入

1.vue中cookie的安裝

在終端機中輸入指令npm install vue-cookies --save，即可安裝cookies，安裝後在main.js檔案中寫下以下程式碼

import { createApp } from 'vue'
import VueCookies from 'vue-cookies'
 
const app = createApp(App)
 
app.config.globalProperties.$cookies = VueCookies

即可在專案中使用cookies

2.登入過程中cookies的設定

因為使用者可能會修改密碼，所以我在業務中常用的做法是當登入的介面傳回正確的資料後（判斷正確，可以登入）先判斷有沒有cookies，有就將其刪除，再創建新的cookies，代碼如下

if (ret.code === 200) {
  // 删除之前的cookies
  if($cookies.isKey("xxxxx") ){
     $cookies.remove("xxxxx")
  }
}

之後將登入的資訊重新存入cookie中，代碼如下

// 设置cookies保存的内容
const xxxxx = {
  username: '',
  password: '',
  // 以下还有很多信息
}

最後便是重新存cookies，代碼如下

// 设置cookies的日期为一个月
$cookies.config("1m")
// 设置cookies
$cookies.set("xxxxx",xxxxx); // 前面的为设置cookies的名字，后面为内容

這裡突然想到了面試中經常提到的一個問題，怎麼將cookies設定為無效，答案是將cookies的過期時間設定為之前的時間，不知道大家有沒有想到。

3.在需要的地方拿到之前存入的cookies

程式碼也非常簡單啦

import { getCurrentInstance } from 'vue'
 
// 创建可以访问内部组件实例的实例
const internalInstance = getCurrentInstance()
const internalData = internalInstance.appContext.config.globalProperties
const xxxxx = internalData.$cookies.get('xxxxx') // 后面的为之前设置的cookies的名字

這樣就可以在需要的地方拿到cookies中的內容了。

以上是vue3中cookie如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！