Vue中使用js-cookie详情

 更新时间:2022年03月29日 17:21:31   作者:~疆  
这篇文章主要介绍了Vue中使用js-cookie详情,文章围绕js-cookie的相关资料展开详细内容具有一定的的参考价值,需要的小伙伴可以参考一下

一、安装js-cookie

cnpm i -S js-cookie

二、使用

1、局部使用

import Cookies from "js-cookie";​​​​​​​

示例: 

<template>
  <div>
    <p>当前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>

效果:

如果想要设置有效期,添加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}}</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函数就不要用箭头函数了,就用普通的函数写法

到此这篇关于Vue中使用js-cookie详情的文章就介绍到这了,更多相关Vue使用js-cookie内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue实现画笔回放canvas转视频播放功能

    vue实现画笔回放canvas转视频播放功能

    这篇文章主要介绍了vue实现画笔回放,canvas转视频播放功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-01-01
  • vue router仿天猫底部导航栏功能

    vue router仿天猫底部导航栏功能

    这篇文章主要介绍了vue router仿天猫底部导航栏功能,需要的朋友可以参考下
    2017-10-10
  • vue3.0和vue2.0的区别详细讲解

    vue3.0和vue2.0的区别详细讲解

    vue经历从2.0到3.0更新之后,简⽽⾔之就是变得更轻更快,使⽤起来更加⽅便,下面这篇文章主要给大家介绍了关于vue3.0和vue2.0区别的相关资料,需要的朋友可以参考下
    2023-10-10
  • 在vue中,v-for的索引index在html中的使用方法

    在vue中,v-for的索引index在html中的使用方法

    下面小编就为大家分享一篇在vue中,v-for的索引index在html中的使用方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue前后端不同端口的实现方法

    Vue前后端不同端口的实现方法

    今天小编就为大家分享一篇Vue前后端不同端口的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue 实现CLI 3.0 + momentjs + lodash打包时优化

    Vue 实现CLI 3.0 + momentjs + lodash打包时优化

    今天小编就为大家分享一篇Vue 实现CLI 3.0 + momentjs + lodash打包时优化,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • 详解vue route介绍、基本使用、嵌套路由

    详解vue route介绍、基本使用、嵌套路由

    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用,这篇文章主要介绍了vue route介绍、基本使用、嵌套路由,需要的朋友可以参考下
    2022-08-08
  • vue数据操作之点击事件实现num加减功能示例

    vue数据操作之点击事件实现num加减功能示例

    这篇文章主要介绍了vue数据操作之点击事件实现num加减功能,结合实例形式分析了vue.js事件响应及数值运算相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • Vue前端表格导出Excel文件的图文教程

    Vue前端表格导出Excel文件的图文教程

    我们在开发的时候会经常用的导出excel表格功能,刚好自己开发有遇到,就记录一下,下面这篇文章主要给大家介绍了关于Vue前端表格导出Excel文件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • vue3 setup的使用和原理实例详解

    vue3 setup的使用和原理实例详解

    这篇文章主要介绍了vue3的setup的使用和原理,结合实例形式详细分析了vue3 setup的基本功能、原理与使用方法,需要的朋友可以参考下
    2023-06-06

最新评论