标签：universal cookie key persistedstate vuex nuxt

前言

因为服务端不存在 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 的方式即可

标签：universal,cookie,key,persistedstate,vuex,nuxt
来源： https://blog.csdn.net/weixin_41852038/article/details/122213485

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。