Vue中使用js-cookie詳情
一、安裝js-cookie
cnpm i -S js-cookie
二、使用
1、局部使用
import Cookies from "js-cookie";???????
示例:
<template> ? <div> ? ? <p>當(dāng)前token: {{token}}</p> ? ? <el-button @click="getToken()">getToken</el-button> ? ? <el-button @click="setToken('asdfasasf暗室逢燈fdasdf')">setToken</el-button> ? ? <el-button @click="removeToken()">removeToken</el-button> ? </div> </template> ? <script> import Cookies from "js-cookie"; export default { ? components: {}, ? data() { ? ? return { ? ? ? token: "" ? ? }; ? }, ? methods: { ? ? getToken() { ? ? ? this.token = Cookies.get("token"); ? ? }, ? ? setToken(token) { ? ? ? Cookies.set("token", token); ? ? }, ? ? removeToken: () => Cookies.remove("token") ? } }; </script>
效果:
如果想要設(shè)置有效期,添加expires屬性即可,單位為天。即:
setToken(token) { ? ? Cookies.set("token", token, { expires: 7 }); //有效期為7天 }
獲取所有Cookie函數(shù):Cookies.get();
2、全局使用
main.js中引入:
import Cookies from "js-cookie"; Vue.prototype.$cookie = Cookies;
使用:
<template> ? <div> ? ? <p>當(dāng)前token: {{token}}</p> ? ? <el-button @click="getToken()">getToken</el-button> ? ? <el-button @click="setToken('asdfasasf暗室逢燈fdasdf')">setToken</el-button> ? ? <el-button @click="removeToken()">removeToken</el-button> ? </div> </template> ? <script> export default { ? data() { ? ? return { ? ? ? token: "", ? ? ? allCookies: "" ? ? }; ? }, ? methods: { ? ? getToken() { ? ? ? this.token = this.$cookie.get("token"); ? ? }, ? ? setToken(token) { ? ? ? this.$cookie.set("token", token, { expires: 7 }); //有效期為7天 ? ? }, ? ? removeToken() { ? ? ? this.$cookie.remove("token"); ? ? } ? } }; </script>
注意:全局使用js-cookie
時,這里的removeToken
函數(shù)就不要用箭頭函數(shù)了,就用普通的函數(shù)寫法
到此這篇關(guān)于Vue中使用js-cookie詳情的文章就介紹到這了,更多相關(guān)Vue使用js-cookie內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue3修改link標(biāo)簽?zāi)J(rèn)icon無效問題詳解
這篇文章主要介紹了vue3修改link標(biāo)簽?zāi)J(rèn)icon無效問題詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10vue的style綁定background-image的方式和其他變量數(shù)據(jù)的區(qū)別詳解
今天小編就為大家分享一篇vue的style綁定background-image的方式和其他變量數(shù)據(jù)的區(qū)別詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue項目實現(xiàn)設(shè)置根據(jù)路由高亮對應(yīng)的菜單項操作
這篇文章主要介紹了vue項目實現(xiàn)設(shè)置根據(jù)路由高亮對應(yīng)的菜單項操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08關(guān)于ElementUI自定義Table支持render
這篇文章主要介紹了關(guān)于ElementUI自定義Table支持render,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10