共计 1045 个字符,预计需要花费 3 分钟才能阅读完成。
导读 | 这篇文章主要介绍了 Vue 中使用 js-cookie 详情,文章围绕 js-cookie 的相关资料展开详细内容具有一定的的参考价值,需要的小伙伴可以参考一下 |
一、安装 js-cookie
cnpm i -S js-cookie
二、使用
1、局部使用
import Cookies from "js-cookie";
示例:
当前 token:{{token}} | |
getToken | |
setToken | |
removeToken | |
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") | |
} | |
}; |
效果:
如果想要设置有效期,添加 expires 属性即可,单位为天。即:
setToken(token) {Cookies.set("token", token, { expires: 7}); // 有效期为 7 天 | |
} |
获取所有 Cookie 函数:Cookies.get();
2、全局使用
main.js 中引入:
import Cookies from "js-cookie"; | |
Vue.prototype.$cookie = Cookies; |
使用:
当前 token:{{token}} | |
getToken | |
setToken | |
removeToken | |
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"); | |
} | |
} | |
}; |
注意:全局使用 js-cookie 时,这里的 removeToken 函数就不要用箭头函数了,就用普通的函数写法
到此这篇关于 Vue 中使用 js-cookie 详情的文章就介绍到这了。
正文完
星哥玩云-微信公众号
