vuex数据持久化存储

持久化存储"/>

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

转载于:.html