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

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