简单介绍Vue中使用js-cookie详情

这篇文章主要介绍了Vue中使用js-cookie详情，文章围绕js-cookie的相关资料展开详细内容具有一定的的参考价值，需要的小伙伴可以参考一下

一、安装js-cookie

cnpm i -S js-cookie

二、使用

1、局部使用

import Cookies from "js-cookie";

示例：

< template>< div>< p>当前token： {{token}}< el-button @click="getToken()">getToken< el-button @click="setToken('asdfasasf暗室逢灯fdasdf')">setToken< el-button @click="removeToken()">removeToken< /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>

效果：

如果想要设置有效期，添加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;

使用：

< template>< div>< p>当前token： {{token}}< el-button @click="getToken()">getToken< el-button @click="setToken('asdfasasf暗室逢灯fdasdf')">setToken< el-button @click="removeToken()">removeToken< /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函数就不要用箭头函数了，就用普通的函数写法

到此这篇关于Vue中使用js-cookie详情的文章就介绍到这了。

简单介绍Vue中使用js-cookie详情相关推荐

探讨Vue 数据监测原理-第五节-展开介绍 Vue中监测-【数组】数据的原理
文章目录探讨一下Vue 数据监测的原理本次探讨共的第五个章节第五节:展开介绍 Vue中监测-[数组]数据的原理 1. 案例 1.1. 页面案例 2. 数组形式|对象形式爱好的区别 2.1. 页面 ...
简单介绍Java中Comparable和Comparator
转载自简单介绍Java中Comparable和Comparator Comparable 和 Comparator是Java核心API提供的两个接口,从它们的名字中,我们大致可以猜到它们用来做对象之 ...
Vue中的Js动画与Velocity.js 的结合
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
python中len用法_简单介绍Python中的len()函数的使用
简单介绍Python中的len()函数的使用函数:len() 1:作用:返回字符串.列表.字典.元组等长度 2:语法:len(str) 3:参数:str:要计算的字符串.列表.字典.元组等 4:返回 ...
简述python中的几种数据类型,简单介绍Python中的几种数据类型
简单介绍Python中的几种数据类型 python 里面分为基本数据类型和复合数据类型基本数据类型包括:数值字符串布尔和 none 复合数据类型包括:列表元组字典和集合怎么算是深情 ...
vue中通过js加载图片显现
在vue开发中会遇到这样的问题:有时需要在img中加载多个静态资源的图片,如果我们将src的路径整个定义成一个变量,会发现img加载不出来正个图片的路径,其实此时需要require()来加载静态资源的 ...
简单实现Vue中的虚拟dom
简单实现Vue中的虚拟dom 传送门:简单实现Vue中的插值替换(三) 前言: 要想简单实现虚拟dom,首先我们要了解虚拟dom,知道自己要实现的是个什么东西. 说起来,我刚开始学习Vue的时候对虚拟 ...
简单介绍vue获取token实现token登录的示例代码
最近新做了个vue项目,正好项目中有登录部分,本文就详细的介绍一下登录部分的实现,文中通过示例代码介绍的非常详细,感兴趣的小伙伴们可以参考一下使用token做登录验证的思路大致如下: 1.在第一次登 ...
简单介绍Python中的几种数据类型
大体上把Python中的数据类型分为如下几类: Number(数字) 包括int,long,float,complex String(字符串) 例如:hello,"hello",h ...

简单介绍Vue中使用js-cookie详情

简单介绍Vue中使用js-cookie详情相关推荐

最新文章

热门文章