Nuxt引入vue-persistedstate以及踩坑

前言

项目需求，需要vuex进行路由持久化保存，结合nuxt框架进行记录。

思路

监听数据变化, 每当登录完毕,

vuex 数据发生变化,就要将数据保存到浏览器 本地 (指用户浏览器localStorage)

页面打开时, 会尝试将之前保存过的数据恢复到 vuex 当中即可

有点复杂, 找个插件帮忙

实现缓存信息到本地

nuxtjs中store不能直接使用浏览器的lcoalStorage方法，

而且自己写数据同步功能比较麻烦,

所以我们需要依赖一个插件vuex-persistedstate，该插件会把本地存储的数据存储到store。

引入方法

1. 安装

npm install vuex-persistedstate  --save

nuxt.config.js配置文件

plugins: [
    '@/plugins/element-ui',
    // '@/plugins/localStorage'
    // 这里的引入, 如果是普通字符串, 就在服务端马上运行
    // 如果是要等到浏览器再运行的代码可以将配置改为对象, 并且 路径作为 src 传进去
    {
   
      src: '@/plugins/localStorage',
      // 如果只在浏览器加载的代码, 可以添加一个 属性 ssr: false
      ssr: false
    }
  ],

plugins/localStorage.js

console