介绍

有时候pinia的store状态需要与cookie同步，比如用户信息
这里提供一个方便的工具类

使用

cookie.js工具类

//设置cookie,增加到vue实例方便全局调用  
//vue全局调用的理由是，有些组件所用到的接口可能需要session验证，session从cookie获取  
//当然，如果session保存到vuex的话除外  
//全局引入vue  
var cookie={  
    setCookie (c_name, value, expiredays){  
        var exdate = new Date();  
        exdate.setTime(exdate.getTime()+expiredays);  
        exdate.setDate(exdate.getDate() + expiredays);  
        document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());  
    },  
    getCookie(name){  
        var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");  
        if (arr = document.cookie.match(reg))  
            return (arr[2]);  
        else            return null;    },  
    delCookie(name){  
        var exp = new Date();  
        exp.setTime(exp.getTime() - 1);  
        var cval = cookie.getCookie(name);  
        if (cval != null)  
            document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';  
    }  
}  
  
export default cookie;

在store中使用

import cookie from '@/static/js/cookie.js';
export const useUserStore = defineStore('user', {  
    state: () => ({  
        name: cookie.getCookie('name') || '',  
        token: cookie.getCookie('token') || ''  
    }),  
    actions: {  
        setUserInfo({ name, token }) {  
            this.name = name;  
            this.token = token;  
        },  
        clearUserInfo() {  
            this.name = '';  
            this.token = '';  
            cookie.delCookie('name');  
            cookie.delCookie('token');  
        },  
        syncUserInfoFromCookie() {  
            this.name = cookie.getCookie('name') || '';  
            this.token = cookie.getCookie('token') || '';  
        }  
    }  
});

普通vue组件中使用

cookie.setCookie('token', response.data.token, 7);  
cookie.setCookie('name', response.data.name, 7);  
userStore.syncUserInfoFromCookie()