Nuxt引入vue-persistedstate以及踩坑记录

npm install vuex-persistedstate  --save

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

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)
    })
}

// 用户管理
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}}