vuex状态持久化，vuex-persistedstate

什么是Vuex

Vuex是一个专门为vue.js设计的集中式状态管理架构。状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。

数据丢失

大家在使用Vuex的时候只要浏览器一刷新，Vuex数据就丢失，每次还要手动存在本地缓存里面很不方便，今天找了一下，发现有个小插件可以保持Vuex的持久性

原理大家都懂，就是存localStorage.用法

vuex-persistedstate

vuex-persistedstate 使用浏览器的本地存储（ local storage ）对状态（ state ）进行持久化。这意味着刷新页面或关闭标签页都不会删除你的数据。

vuex-persistedstate GitHub 地址

首先安装

npm install vuex-persistedstate --save-dev

在store文件夹的index.js引入

import createPersistedState from 'vuex-persistedstate'

初始化vuex 加入插件

const store = new Vuex.Store({
  modules: {
    user,
    groupBuying,
    clearance
  },
  getters,
  plugins: [createPersistedState()]
})

默认用的是localStorage的存储方式，因为本项目需求需要改成sessionStorage的存储方式，在配置里面改为，如果有其他配置可以参考官方api

plugins: [createPersistedState(
    { storage: window.sessionStorage }
  )]