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