1. Create js

在src/util下新建cookie.js

// 设置cookie
export function setCookie(c_name, value, expire_days) {
    let exDate = new Date();
    exDate.setDate(exDate.getDate() + expire_days);
    document.cookie =
        c_name +
        '=' +
        encodeURIComponent(value) +
        ';expires=' +
        exDate.toUTCString() +
        ';path=/';
}

export function getCookie(c_name) {
    let c_start = null;
    let c_end = null;
    if (document.cookie.length > 0) {
        c_start = document.cookie.indexOf(c_name + '=');
        if (c_start !== -1) {
            c_start = c_start + c_name.length + 1;
            c_end = document.cookie.indexOf(';', c_start);
            if (c_end === -1) c_end = document.cookie.length;
            return decodeURIComponent(document.cookie.substring(c_start, c_end));
        }
    }
    return '';
}

// 检查cookie
export function checkCookie(c_name) {
    let username = getCookie(c_name);
    if (username !== null && username !== '') {
        return true;
    } else {
        return false;
    }
}

// 清除cookie
export function clearCookie(name) {
    setCookie(name, '', -1);
}

2. Use

1.全局引入，也可以單頁面導入

import Vue from 'vue'
// 引入
import { setCookie, getCookie, checkCookie, clearCookie } from '@/util/cookie'

// 挂载到Vue实例上
Vue.prototype.$setCookie = setCookie;
Vue.prototype.$getCookie = getCookie;
Vue.prototype.$checkCookie = checkCookie;
Vue.prototype.$clearCookie = clearCookie;

2. 组件使用

let res = {
    code: 200,
    data: {
        value: 'ads12as1d32sa13d1sa2d13sa1f'
    },
    msg: '登陆成功'
};

let cookieName = 'test_cookie_name';
let cookieValue = res.data.value;
// 设置 cookie，有效期1天
this.$setCookie(cookieName, cookieValue, 1);

【Vue3.x】Cookies的使用