vue vuex数据状态持久化

vue 数据大屏案例安全预警系统开发时，vue数据需要存储在本地，避免刷新后导致数据丢失。

使用插件

安装依赖

npm install --save vuex-persist
or
yarn add vuex-persist

import VuexPersistence from 'vuex-persist'
创建对象并配置
const vuexLocal = new VuexPersistence({
    storage: window.localStorage
})

const store = new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  plugins: [vuexLocal.plugin]
})

key	string	将状态存储在存储中的键。默认: 'vuex'
storage	Storage (Web API) 可传localStorage, sessionStorage, localforage 或者你自定义的存储对象.	接口必须要有get和set. 默认是: window.localStorage
saveState	function (key, state[, storage])	如果不使用存储，这个自定义函数将保存状态保存为持久性。
restoreState	function (key[, storage]) => state	如果不使用存储，这个自定义函数处理从存储中检索状态
reducer	function (state) => object	将状态减少到只需要保存的值。默认情况下，保存整个状态。
filter	function (mutation) => boolean	突变筛选。看mutation.type并返回true，只有那些你想坚持写被触发。所有突变的默认返回值为true。
modules	string[]	要持久化的模块列表。