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-02-02
  • el-form resetFields无效和validate无效的可能原因及解决方法

    el-form resetFields无效和validate无效的可能原因及解决方法

    本文主要介绍了el-form resetFields无效和validate无效的可能原因及解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • vue 单元测试的推荐插件和使用示例

    vue 单元测试的推荐插件和使用示例

    单元测试是软件开发非常基础的一部分。单元测试会封闭执行最小化单元的代码,使得添加新功能和追踪问题更容易。Vue 的单文件组件使得为组件撰写隔离的单元测试这件事更加直接。它会让你更有信心地开发新特性而不破坏现有的实现,并帮助其他开发者理解你的组件的作用。
    2021-06-06
  • 详解vue项目接入微信JSSDK的坑

    详解vue项目接入微信JSSDK的坑

    这篇文章主要介绍了详解vue项目接入微信JSSDK的坑,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 详解使用vue脚手架工具搭建vue-webpack项目

    详解使用vue脚手架工具搭建vue-webpack项目

    本篇文章主要介绍了详解使用vue脚手架工具搭建vue-webpack项目,非常具有实用价值,需要的朋友可以参考下
    2017-05-05
  • vue中的install方法使用

    vue中的install方法使用

    这篇文章主要介绍了vue中的install方法使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue 解决数组赋值无法渲染在页面的问题

    vue 解决数组赋值无法渲染在页面的问题

    今天小编就为大家分享一篇vue 解决数组赋值无法渲染在页面的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Vue 框架之动态绑定 css 样式实例分析

    Vue 框架之动态绑定 css 样式实例分析

    这篇文章主要介绍了Vue 框架之动态绑定 css 样式的方法,本文通过分享小实例给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • Vue.js通过组件处理Icon图标

    Vue.js通过组件处理Icon图标

    这篇文章介绍了Vue.js通过组件处理Icon图标的方法,文中通过示例代码介绍的非常详细。对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-11-11
  • 详解Vue自定义指令及使用

    详解Vue自定义指令及使用

    这篇文章主要介绍了Vue自定义指令及使用,对Vue感兴趣的同学,可以参考下
    2021-05-05

最新评论