vue3-cookies元件使用

邢帅杰發表於2024-06-14
VueCookie元件
npm安裝
npm install vue3-cookies --save

引入 main.js

// 引入VueCookies
import VueCookies from 'vue3-cookies'
const app = createApp(App)
app.use(VueCookies)
// 新增到vue物件上，可以在全域性透過 this.$cookies來呼叫
app.config.globalProperties.$cookies = VueCookies;
app.mount('#app')  // 掛載放最後

使用方式1

<script setup>
  // 因為在main.js中我們執行了app.use(VueCookies)，那麼vue內部就會為vue物件繫結上cookie
  // 所以我們可以透過proxy.$cookies來操作cookie了
  // proxy相當於vue2中的this
  import {getCurrentInstance} from 'vue'
  const {proxy} = getCurrentInstance()
  // 設定cookie
  proxy.$cookies.set('k1', 'v1', '1h')
  // 獲取
  console.log(proxy.$cookies.get('k1')) // v1
</script>

使用方式2

<script setup>
  import { useCookies } from "vue3-cookies";
  const { cookies } = useCookies();
  // 設定cookie
  cookies.set('k2', 'v2', '1h')
  // 獲取
  console.log(cookies.get('k2')) // v2
</script>

時間單位，忽略大小寫
y：年
m：月
d：日
h：小時
min：分
s：秒

示例：

<script lang="ts" setup>
import { useCookies } from "vue3-cookies";
const { cookies } = useCookies();
// 設定cookie 引數說明（ 關鍵值（keyName），引數值（value），過期時間（expireTimes））
cookies.set("name", "John","30d");//30天過期
cookies.set("name", "John",60 * 60 * 24);//直接傳數字，1天過期
cookies.set("name1", "White");//不設定過期時間，預設是1天過期。
cookies.set("token1","123456", new Date(2020, 10, 01));//填寫Date物件，明確指定過期時間
cookies.set("token2","123456", "Sat, 13 Mar 2017 12:25:57 GMT");// 填寫一個時間字串，指定過期時間
cookies.set("token3","123456","0");//瀏覽器會話結束時過期
cookies.set("token4","123456",-1); //永不過期
// 獲取cookie
const n = cookies.get("name");//返回 John
const n1 = cookies.get("name1");//返回 White
console.log(n, n1);//返回 John,White,Petter
// 刪除cookie
cookies.remove("name1");
// 判斷cookie是否存在
const b1 = cookies.isKey("name");//返回 true
const b2 = cookies.isKey("name1");//返回 false
console.log(b1, b2);//返回 true，false
// 獲取所有cookie的key
const allKeys = cookies.keys();
console.log(allKeys);// 返回 ["name"]
allKeys.forEach(k=>{
    console.log(k,cookies.get(k));
    // name John
});
</script>

特別說明：設定cookies時，傳遞的值不能是一個物件，必須將物件轉換為字串，但是獲取cookies時，返回的是一個物件，可以直接呼叫物件的屬性值。

<script lang="ts" setup>
import { useCookies } from "vue3-cookies";
const { cookies } = useCookies();
const ui = { name: "Mike", code: "1001" };
// ui 物件必須轉換為字串
cookies.set("ui", JSON.stringify(ui));
const ui_c = cookies.get("ui");//返回的是一個物件，可以直接呼叫屬性
const ui_c: any = cookies.get("ui");
console.log("name", ui_c.name)
console.log("code", ui_c.code);
//返回
// name Mike
// code 1001 
</script>

傳送請求攜帶cookie，axios的配置中設定withCredentials: true // 必須指定這個引數，否則axios才能攜帶引數

相關文章