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组件跨层级获取组件操作

    这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue3使用vuex实现页面实时更新数据实例教程(setup)

    vue3使用vuex实现页面实时更新数据实例教程(setup)

    在前端开发中往往会遇到页面需要实时刷新数据的情况,给用户最新的数据展示,这篇文章主要给大家介绍了关于vue3使用vuex实现页面实时更新数据(setup)的相关资料,需要的朋友可以参考下
    2022-09-09
  • 少女风vue组件库的制作全过程

    少女风vue组件库的制作全过程

    这篇文章主要给大家介绍了关于少女风vue组件库的制作全过程,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05
  • 一文秒懂vue-property-decorator

    一文秒懂vue-property-decorator

    这篇文章主要介绍了vue-property-decorator的简单知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • 如何处理vue router 路由传参刷新页面参数丢失

    如何处理vue router 路由传参刷新页面参数丢失

    这篇文章主要介绍了如何处理vue router 路由传参刷新页面参数丢失,对vue感兴趣的同学,可以参考下
    2021-05-05
  • Vue中key的原理以及diff算法详解

    Vue中key的原理以及diff算法详解

    这篇文章主要介绍了Vue中key的原理以及diff算法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-04-04
  • vue3 ElementUI 日期禁选当日前当日后三天后的实现代码

    vue3 ElementUI 日期禁选当日前当日后三天后的实现代码

    这篇文章主要介绍了vue3 ElementUI 日期禁选当日前当日后三天后的实现代码,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-05-05
  • Vuex中actions的使用教程详解

    Vuex中actions的使用教程详解

    actions作为Vuex的五大核心之一,它的属性是用来处理异步方法的,通过提交mutations实现。本文将具体介绍一下actions的使用教程,需要的可以参考一下
    2022-01-01
  • vue.js的安装方法

    vue.js的安装方法

    这篇文章主要为大家详细介绍了vue.js的安装方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • vue项目如何修改title旁边的icon图片

    vue项目如何修改title旁边的icon图片

    这篇文章主要介绍了vue项目如何修改title旁边的icon图片,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12

最新评论