首页 > 其他分享 >vue3-cookies

vue3-cookies

时间:2022-11-19 09:34:01浏览次数:43  
标签:cookies const token export vue3 import

安装

npm install vue3-cookies --save

main.js

import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueCookies from 'vue3-cookies'

createApp(App).use(store).use(router).use(VueCookies).mount('#app')

使用

import {useCookies} from 'vue3-cookies'
const {cookies} = useCookies();
cookies.set("ts", "123123", "10s")

具体

https://github.com/KanHarI/vue3-cookies

plugins/cookie.js

import {useCookies} from "vue3-cookies";

const {cookies} = useCookies();


export const getToken = () => {
    return cookies.get("token") || "";
}

export const getUserName = () => {
    return cookies.get("username") || "";
}

export const setUserToken = (user, token) => {
    cookies.set('username', user, "30s");
    cookies.set('token', token, "30s");
}

export const clearUserToken = () => {
    cookies.remove("username");
    cookies.remove("token");
}

标签:cookies,const,token,export,vue3,import
From: https://www.cnblogs.com/sherwin1995/p/16905461.html

相关文章

  • 在业务逻辑中,经常会有父组件调用子组件方法的情况,vue2.0 和 vue3.0 的使用中有些不一
    在业务逻辑中,经常会有父组件调用子组件方法的情况,vue2.0和vue3.0的使用中有些不一样,在这里总结下。vue2.0中的使用方法父组件:<template><div@click="fatherMeth......
  • vue3 生成二维码 qrcodejs2-fix
    1、安装qrcodejs2-fixnpminstallqrcodejs2-fix2、引入qrcodejs2-fiximportQRCodefrom'qrcodejs2-fix';3、在页面中定义容器<divid="code"></div>4、定义......
  • Vue3 企业级优雅实战 - 组件库框架 - 7 组件库文档的开发和构建
    该系列已更新文章:分享一个实用的vite+vue3组件库脚手架工具,提升开发效率开箱即用yyg-cli脚手架:快速创建vue3组件库和vue3全家桶项目Vue3企业级优雅实战-组......
  • 为什么vue3要选用proxy,好处是什么?
    提问Object.defineProperty()和proxy的区别?为什么vue3要选用proxy,好处是什么?proxyProxy对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋......
  • Vue3, setup语法糖、Composition API全方位解读
    起初Vue3.0暴露变量必须return出来,template中才能使用;Vue3.2中只需要在script标签上加上setup属性,组件在编译的过程中代码运行的上下文是在setup()函数中,无......
  • 解读Vue3模板编译优化
    今天的文章打算学习下Vue3下的模板编译与Vue2下的差异,以及VDOM下Diff算法的优化。编译入口了解过Vue3的同学肯定知道Vue3引入了新的组合Api,在组件mount阶......
  • Vue3源码解读之patch
    例子代码本篇将要讲解domdiff,那么咱们结合下面的例子来进行讲解,这个例子是在上一篇文章的基础上,加了一个数据变更,也就是list的值发生了改变。html中增加了一个按钮change......
  • 如何正确学习vue3.0源码
    为什么要学源码技术是第一生产力学习API的设计目的、思路、取舍学习优秀的代码风格学习组织代码的方式学习实现方法的技巧学习ES67新API、TS高级用法不给自......
  • vue3语法汇总
    组合式API基础 setup 组件选项在创建组件之前执行,一旦 props 被解析,并充当合成API的入口点。setup的两个注意点:1、setup执行时机,在beforeCreate之前执行一次,thi......
  • 使用vite + vue3 + ant-design-vue + vue-router + vuex 创建一个后台管理应用
    使用vite+vue3+ant-design-vue+vue-router+vuex创建一个管理应用的记录使用vite创建项目我创建的node版本是v16.17.1使用NPM或者YARN安装中选择模板和......