Nuxt引用cookie-universal-nuxt在服務(wù)端請(qǐng)求cookie方式
更新時(shí)間：2023年10月11日 14:15:40 作者：明知山_
這篇文章主要介紹了Nuxt引用cookie-universal-nuxt在服務(wù)端請(qǐng)求cookie方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
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)文章
這篇文章主要為大家詳細(xì)介紹了用Vue制作的簡易計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
el-form resetFields無效和validate無效的可能原因及解決方法
本文主要介紹了el-form resetFields無效和validate無效的可能原因及解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
單元測(cè)試是軟件開發(fā)非?；A(chǔ)的一部分。單元測(cè)試會(huì)封閉執(zhí)行最小化單元的代碼，使得添加新功能和追蹤問題更容易。Vue 的單文件組件使得為組件撰寫隔離的單元測(cè)試這件事更加直接。它會(huì)讓你更有信心地開發(fā)新特性而不破壞現(xiàn)有的實(shí)現(xiàn)，并幫助其他開發(fā)者理解你的組件的作用。2021-06-06
這篇文章主要介紹了詳解vue項(xiàng)目接入微信JSSDK的坑,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
詳解使用vue腳手架工具搭建vue-webpack項(xiàng)目
本篇文章主要介紹了詳解使用vue腳手架工具搭建vue-webpack項(xiàng)目，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-05-05
這篇文章主要介紹了vue中的install方法使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
今天小編就為大家分享一篇vue 解決數(shù)組賦值無法渲染在頁面的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
Vue 框架之動(dòng)態(tài)綁定 css 樣式實(shí)例分析
這篇文章主要介紹了Vue 框架之動(dòng)態(tài)綁定 css 樣式的方法，本文通過分享小實(shí)例給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
這篇文章介紹了Vue.js通過組件處理Icon圖標(biāo)的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
這篇文章主要介紹了Vue自定義指令及使用，對(duì)Vue感興趣的同學(xué)，可以參考下2021-05-05