页面刷新vuex数据消失问题解决方案 之 vuex中间件
之前我写了一篇用ES6 Proxy方案解决数据同步的文章 页面刷新vuex数据消失问题解决方案.
今天和同事沟通这个vuex数据还原问题,我说我的方法很奇异。聊着聊着,同事咋不用 store.subscribe , 当时还有点觉得不可能,仔细再去看vuex官方文档。
这个还真的是可行,但当然也是存在不方便的地方的。
此方案现在已经应用我基于vue开发的音乐web app VBOX 上,欢迎大家给star.
基本方案和步骤如下
1. 简单的按照键复制对象
2. localStorage存储的封装
3. vuex插件编写
4. localStorage的数据还原和初始化 Vuex.Store
第一:简单的按照键复制对象
/** * 数据简单复制 * @param {*} source * @param {*} keys */ const copy = function (source, keys = []) { if (!source) { return source } let d = Object.create(null) keys.forEach(k => { d[k] = source[k] }) return d } export { copy }
第二:localStorage的简单封装
const ls = window.localStorage // https://github.com/tsironis/lockr export default { getItem(key) { try { return JSON.parse(ls.getItem(key)) } catch (err) { return null } }, setItem(key, val) { ls.setItem(key, JSON.stringify(val)) }, clear() { ls.clear() }, keys() { return ls.keys() }, removeItem(key) { ls.removeItem(key) } }
第三:vuex插件
主要是一个lsKey,存到localStorage的key,
另外一个是 mutation白名单,白名单内的触发不会触发数据同步
实际上这里是存在一定问题的,这里适用模块后的store
(1) 无法快速有效便捷的定位什么时候该触发同步
import ls from '../utils/LStorage' import { copy } from '../utils/utils' export const createLSPlugin = function (lsKey, mappings, whitelist = []) { let k = lsKey || 'lsKey' return store => { store.subscribe((mutation, state) => { if (whitelist.findIndex(m => m === mutation.type) < 0) { let cd = Object.create(null) Object.keys(state).forEach(k => { if (mappings[k]) { cd[k] = copy(state[k], mappings[k]) } }) ls.setItem(k, cd) } }) } }
第四:初始化Vuex.Store
主要是从localStore里面还原数据合并到state里面,如果state没有分模块还是比较简单的。
import Vue from 'vue' import Vuex from 'vuex' import playing from './playing' import player from './player' import searchHistory from './searchHistory' import { createLSPlugin } from '../plugin/syncls' import ls from '../utils/LStorage' const LS_KEY = 'vbox' const lsData = ls.getItem(LS_KEY) let mapping = { playing: ['list', 'current'], player: ['mode'], searchHistory: ['list'] } let mWhiteList = ['player/timeUpdate', 'player/setState'] if (lsData) { let { playing: ls_playing, player: ls_player, searchHistory: ls_searchHistory } = lsData Object.assign(playing, { state: ls_playing }) Object.assign(player, { state: ls_player }) Object.assign(searchHistory, { state: ls_searchHistory }) } Vue.use(Vuex) const plugin = createLSPlugin(LS_KEY, mapping, mWhiteList) const store = new Vuex.Store({ modules: { playing, player, searchHistory }, plugins: [plugin] }) export default store
优点
1. 代码简单,对代码改动不大
2. 对原始的state没有额外干预
缺点
1. 触发存储条件不好控制
2. 存储限制实现会相对复杂