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