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 做数据持久化

因为服务端不存在 Local Storage 和 Session Storage

所以便使用了 cookie-universal-nuxt 这个插件

在做Nuxt项目的时候发现Vuex 在刷新页面后储存的数据丢失

用 vuex-persistedstate 来持久化数据

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 的方式即可

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue实现路由跳转至外界页面
这篇文章主要介绍了Vue实现路由跳转至外界页面方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
简单聊一聊axios配置请求头content-type
最近在工作中碰到一个问题,后端提供的get请求的接口需要在request header设置,下面这篇文章主要给大家介绍了关于axios配置请求头content-type的相关资料,需要的朋友可以参考下
2022-04-04
typescript+vite项目配置别名的方法实现
我们为了省略冗长的路径，经常喜欢配置路径别名，本文主要介绍了typescript+vite项目配置别名的方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07
vue3的基本使用方法详细教程
这篇文章主要介绍了vue3的基本使用方法,结合实例形式详细分析了vue3功能、组件、生命周期、TypeScript结合运用等相关概念与使用方法,需要的朋友可以参考下
2023-06-06
vue-cli-service的参数配置过程
这篇文章主要介绍了vue-cli-service的参数配置过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
element中form组件prop嵌套属性的问题解决
本文主要介绍了element中form组件prop嵌套属性的问题解决，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
Vue中render函数调用时机与执行细节源码分析
这篇文章主要为大家介绍了Vue中render函数调用时机与执行细节源码分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
vue.js $refs和$emit 父子组件交互的方法
本篇文章主要介绍了vue.js $refs和$emit 父子组件交互的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12
Vue render函数实战之实现tabs选项卡组件
这篇文章主要介绍了Vue render函数实战之实现tabs选项卡组件的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-04-04
Vue3全局配置axios的两种方式总结
在实际项目开发中,几乎每个组件中都会用到 axios 发起数据请求,下面这篇文章主要给大家总结介绍了关于Vue3全局配置axios的两种方式,文中通过图文介绍的非常详细,需要的朋友可以参考下
2023-01-01