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

你可能感兴趣的