欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue中使用js-cookie詳情

 更新時間:2022年03月29日 17:21:31   作者:~疆  
這篇文章主要介紹了Vue中使用js-cookie詳情,文章圍繞js-cookie的相關(guān)資料展開詳細(xì)內(nèi)容具有一定的的參考價值,需要的小伙伴可以參考一下

一、安裝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)文章

  • vue設(shè)置頁面背景及背景圖片簡單示例

    vue設(shè)置頁面背景及背景圖片簡單示例

    這篇文章主要給大家介紹了關(guān)于vue設(shè)置頁面背景及背景圖片的相關(guān)資料,在Vue項目開發(fā)中我們經(jīng)常要向頁面中添加背景圖片,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
    2023-08-08
  • vue3修改link標(biāo)簽?zāi)J(rèn)icon無效問題詳解

    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-10
  • vue的style綁定background-image的方式和其他變量數(shù)據(jù)的區(qū)別詳解

    vue的style綁定background-image的方式和其他變量數(shù)據(jù)的區(qū)別詳解

    今天小編就為大家分享一篇vue的style綁定background-image的方式和其他變量數(shù)據(jù)的區(qū)別詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue版日歷組件的實現(xiàn)方法

    vue版日歷組件的實現(xiàn)方法

    這篇文章主要為大家詳細(xì)介紹了vue版日歷組件的實現(xiàn)方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • vue項目實現(xiàn)設(shè)置根據(jù)路由高亮對應(yīng)的菜單項操作

    vue項目實現(xiàn)設(shè)置根據(jù)路由高亮對應(yīng)的菜單項操作

    這篇文章主要介紹了vue項目實現(xiàn)設(shè)置根據(jù)路由高亮對應(yīng)的菜單項操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • 項目開發(fā)中husky的使用詳解

    項目開發(fā)中husky的使用詳解

    這篇文章主要為大家介紹了項目開發(fā)中husky的使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-11-11
  • 詳解eslint在vue中如何使用

    詳解eslint在vue中如何使用

    這篇文章主要為大家介紹了eslint在vue中如何使用,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-11-11
  • 2023年最新的vue.js下載和安裝的3種方法詳解

    2023年最新的vue.js下載和安裝的3種方法詳解

    這篇文章主要介紹了2023年最新的vue.js下載和安裝的3種方法,每種方法結(jié)合實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2023-05-05
  • 關(guān)于ElementUI自定義Table支持render

    關(guān)于ElementUI自定義Table支持render

    這篇文章主要介紹了關(guān)于ElementUI自定義Table支持render,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • vue設(shè)置全局訪問接口API地址操作

    vue設(shè)置全局訪問接口API地址操作

    這篇文章主要介紹了vue設(shè)置全局訪問接口API地址操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08

最新評論