Nuxt引用cookie-universal-nuxt在服務(wù)端請(qǐng)求cookie方式
Nuxt引用cookie-universal-nuxt在服務(wù)端請(qǐng)求cookie
npm install cookie-universal-nuxt -s
在nuxt.config.js添加
modules: [ 'cookie-universal-nuxt' ],
設(shè)置cookie
this.$cookies.set('token', 123456)獲取cookie
this.$cookies.get("token")清除cookie
this.$cookies.remove('token')在asyncData獲取
async asyncData({ app }) {
console.log(app.$cookies.get("token"));
},nuxt cookie-universal-nuxt 搭配 vuex-persistedstate 做數(shù)據(jù)持久化
因?yàn)榉?wù)端不存在 Local Storage 和 Session Storage
所以 便使用了 cookie-universal-nuxt 這個(gè)插件
在做Nuxt項(xiàng)目的時(shí)候 發(fā)現(xiàn)Vuex 在刷新頁面后 儲(chǔ)存的數(shù)據(jù)丟失
用 vuex-persistedstate 來持久化數(shù)據(jù)
cookie-universal-nuxt 安裝
cookie-universal-nuxt 的安裝
npm install cookie-universal-nuxt -s
打開 nuxt.config.js 文件
在 modules 下添加
modules: [ ? ? // https://go.nuxtjs.dev/axios ? ? 'cookie-universal-nuxt' ? ],
更多使用方法請(qǐng)點(diǎn)擊 傳送門
vuex-persistedstate安裝
安裝命令
npm install vuex-persistedstate --save
配合 cookie-universal-nuxt 使用
在 plugins文件夾下新建 文件 persistedState.js
import createPersistedState from 'vuex-persistedstate'
export default ({ app, store }) => {
createPersistedState({
storage: {
getItem: (key) => app.$cookies.get(key),
setItem: (key, value) =>
app.$cookies.set(key, value, {
path: '/',
maxAge: 60 * 60 * 24 * 1 // cookie存儲(chǔ)時(shí)間 可修改
}),
removeItem: (key) => app.$cookies.remove(key)
}
})(store)
}打開 nuxt.config.js 文件
在 piugins 模塊下進(jìn)行導(dǎo)入
plugins: [
'@/plugins/persistedState',
],到此 使用 cookie就可以進(jìn)行持久化儲(chǔ)存
使用方式
this.$cookies.set('token', 'XXXXXXXXXXXXXXXXXXXX')就正常的使用 cookie-universal-nuxt 的方式即可
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue組件跨層級(jí)獲取組件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue3使用vuex實(shí)現(xiàn)頁面實(shí)時(shí)更新數(shù)據(jù)實(shí)例教程(setup)
在前端開發(fā)中往往會(huì)遇到頁面需要實(shí)時(shí)刷新數(shù)據(jù)的情況,給用戶最新的數(shù)據(jù)展示,這篇文章主要給大家介紹了關(guān)于vue3使用vuex實(shí)現(xiàn)頁面實(shí)時(shí)更新數(shù)據(jù)(setup)的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要給大家介紹了關(guān)于少女風(fēng)vue組件庫(kù)的制作全過程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了vue-property-decorator的簡(jiǎn)單知識(shí),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
如何處理vue router 路由傳參刷新頁面參數(shù)丟失
這篇文章主要介紹了如何處理vue router 路由傳參刷新頁面參數(shù)丟失，對(duì)vue感興趣的同學(xué)，可以參考下2021-05-05
這篇文章主要介紹了Vue中key的原理以及diff算法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
vue3 ElementUI 日期禁選當(dāng)日前當(dāng)日后三天后的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue3 ElementUI 日期禁選當(dāng)日前當(dāng)日后三天后的實(shí)現(xiàn)代碼,本文通過示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-05-05
actions作為Vuex的五大核心之一，它的屬性是用來處理異步方法的，通過提交mutations實(shí)現(xiàn)。本文將具體介紹一下actions的使用教程，需要的可以參考一下2022-01-01
這篇文章主要為大家詳細(xì)介紹了vue.js的安裝方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
vue項(xiàng)目如何修改title旁邊的icon圖片
這篇文章主要介紹了vue項(xiàng)目如何修改title旁邊的icon圖片，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12