Nuxt引用cookie-universal-nuxt在服務(wù)端請求cookie方式
更新時間：2023年10月11日 14:15:40 作者：明知山_
這篇文章主要介紹了Nuxt引用cookie-universal-nuxt在服務(wù)端請求cookie方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
Nuxt引用cookie-universal-nuxt在服務(wù)端請求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ù)持久化
因為服務(wù)端不存在 Local Storage 和 Session Storage
所以 便使用了 cookie-universal-nuxt 這個插件
在做Nuxt項目的時候 發(fā)現(xiàn)Vuex 在刷新頁面后 儲存的數(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' ? ],
更多使用方法請點擊 傳送門
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存儲時間 可修改
}),
removeItem: (key) => app.$cookies.remove(key)
}
})(store)
}打開 nuxt.config.js 文件
在 piugins 模塊下進行導(dǎo)入
plugins: [
'@/plugins/persistedState',
],到此 使用 cookie就可以進行持久化儲存
使用方式
this.$cookies.set('token', 'XXXXXXXXXXXXXXXXXXXX')就正常的使用 cookie-universal-nuxt 的方式即可
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue組件跨層級獲取組件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue3使用vuex實現(xiàn)頁面實時更新數(shù)據(jù)實例教程(setup)
在前端開發(fā)中往往會遇到頁面需要實時刷新數(shù)據(jù)的情況,給用戶最新的數(shù)據(jù)展示,這篇文章主要給大家介紹了關(guān)于vue3使用vuex實現(xiàn)頁面實時更新數(shù)據(jù)(setup)的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要給大家介紹了關(guān)于少女風(fēng)vue組件庫的制作全過程，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了vue-property-decorator的簡單知識,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
如何處理vue router 路由傳參刷新頁面參數(shù)丟失
這篇文章主要介紹了如何處理vue router 路由傳參刷新頁面參數(shù)丟失，對vue感興趣的同學(xué)，可以參考下2021-05-05
這篇文章主要介紹了Vue中key的原理以及diff算法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
vue3 ElementUI 日期禁選當(dāng)日前當(dāng)日后三天后的實現(xiàn)代碼
這篇文章主要介紹了vue3 ElementUI 日期禁選當(dāng)日前當(dāng)日后三天后的實現(xiàn)代碼,本文通過示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-05-05
actions作為Vuex的五大核心之一，它的屬性是用來處理異步方法的，通過提交mutations實現(xiàn)。本文將具體介紹一下actions的使用教程，需要的可以參考一下2022-01-01
這篇文章主要為大家詳細(xì)介紹了vue.js的安裝方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了vue項目如何修改title旁邊的icon圖片，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12