vuex数据持久化存储

  想想好还是说下vuex数据的持久化存储吧。依稀还记得在做第一个vue项目时,由于刚刚使用vue,对vue的一些基本概念只是有一个简单的了解。当涉及到非父子组件之间通信时,选择了vuex。只是后来竟然发现,刷新页面,数据去哪了???一脸懵逼。其实vuex本质上只是一个公共变量,是存储在浏览器内存中的,刷新页面,浏览器内存重置,数据也会被清空。如果要做数据持久化存储,肯定需要借助浏览器缓存,常用的也就localStorage,sessionStorage,indexDB之前了解一点,用的不是很多。现在也有很多数据持久化存储插件,原理都差不多,下面介绍一下vuex-persist的基本使用:

  1、安装 

npm install vuex-persist -D

  2、基本使用

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'
import VuexPersist from 'vuex-persist' Vue.use(Vuex); const vuexLocal = new VuexPersist({
storage: window.localStorage //可选,sessionStorage/indexDB
}); const store = new Vuex.Store({
state,
getters,
mutations,
actions,
plugins: [vuexLocal.plugin]
}); export default store

  

上一篇:BusyBox下tftp命令的使用


下一篇:Navicat的外键设置