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.log('测试自定义插件')
// 在这个自定义插件中配置 vuex-persistedstate
import createPersistedState from 'vuex-persistedstate'

// 这里什么都可以写, 不过如果你需要用到 nuxt 本身, 必须通过 export 的方式暴露函数来接收

export default ({
    
    store}) => {
    
    
    // 如果想要等到 nuxt 加载完毕
    // 再执行代码, 有一个函数叫做 window.onNuxtReady()
    window.onNuxtReady(()=>{
    
    
        createPersistedState({
    
    
            // 在这里其实, 是想要将 vuex 数据存放到 localStorage 里面
            key: 'store'
        })(store)
    })
}

2. 使用

store/index.js

// 用户管理
export const state = () => ({
    
    
    //采用接口返回的数据结构
    userInfo: {
    
    
        // token: '',
        // user: {}

    }
})
// 测试
// export const state = () => {
    
    
//     return {
    
    
//         // 这里是全局状态数据保存的地方
//         abc: 123
//     }
// }

// 修改 state 里面的数据, 必须使用 mutations 里面的函数
export const mutations = {
    
    
    // 每个属性都是一个函数, 作为修改 state 的方法
    // setAbc(state, data) {
    
    
    // 每个 mutation 函数都可以接受到两个参数
    // 第一个是 state 对象本身
    // 第二是调用函数时额外添加的数据
    // 这里需要做的就是改变 state 数据
    // state.abc = data
    // 这样外面调用这个函数, 并且传入数据, 即可改变当前的 abc 属性
    setUserInfo(state, data) {
    
    
        state.userInfo = data
    }

};

项目中需要存储的地方：

 //将结果发送到刚刚新建的vuex中，存储，实现状态持久化，不然刷新之后数据就没了
 this.$store.commit('userstore/setUserInfo',res.data)

项目中需要使用的地方：

computed:{
    
    
        userInfo(){
    
    
            return this.$store.state.userstore.userInfo
        }
    },
    ----------渲染头像-----------------
     <el-dropdown v-if="userInfo.token">
     <img :src="baseURL+userInfo.user.defaultAvatar"/>
        {
    
    {
    
    userInfo.user.nickname}}

修改完后重新启动项目即可。

3.踩坑

引入后可能出现window is not defined 问题：

检查nuxt.config.js中是否将ssr置为false

将nuxt.config.js中mode设置为’spa’