vuex状态持久化_vuex状态持久化，vuex-persistedstate

什么是Vuex

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

数据丢失

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

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

vuex-persistedstate

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

首先安装

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 }

)]