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

 

　　

转载于:https://www.cnblogs.com/gerry2019/p/10292108.html