目的

前端在使用vuex存储数据的时候，一旦页面刷新，所有之前存储的数据就会丢失。这是因为js代码运行在内存中，代码在运行时，所有的变量和函数都是保存在内存中的，因此在刷新时，之前申请的内存会被释放，js脚本会被重新加载，变量重新赋值。

解决

此时需要这样一个插件来使vuex中的数据持久化，vuex-persistedstate

在store的index.js中这样使用：

// 配置插件，使用数组是可以配置多个插件
  plugins: [
    createPersistedstate({
      // 本地存储名字
      // key可以随便起
      key: 'bx',
      // 指定需要存储的模块
      paths: ['user', 'cart']
    })
  ]

将数据存储在localStorage中，这样用户刷新也不会丢失数据了

举例

user.js：

export default {
  namespaced:true,
  state(){
    return {
      // 用户信息
      profile:{
        id:'',
        account:'',
        token:''
      }
    }
  },
  mutations:{
    // 修改用户信息，到时候payload就是用户信息对象
    setUser (state, payload) {
      state.profile = payload
    }
  }
}

这里设置了一个修改用户信息的方法setUser

在App.vue中调用这个方法，改变其中的account：

<template>
  <div class="container">
    App{{$store.state.user.profile.account}}
    <button @click="$store.commit('user/setUser',{account:'bx'})">设置用户信息</button>
  </div>
</template>
<script>
export default {
  name:'App'
}
</script>

第一次运行时，account是''，所以只显示App

当点击按钮时，触发mutations里的方法setUser修改信息，此时将用户信息存储在浏览器的localStorage中，从而能显示account的数据，再次刷新不会丢失数据

在开发的过程中，像用户信息（名字，头像，token）需要vuex中存储且需要本地存储。再例如，购物车如果需要未登录状态下也支持，如果管理在vuex中页需要存储在本地。

vuex持久化，让你不用自己存储状态！

目的

解决

举例