之前我写了一篇用ES6 Proxy方案解决数据同步的文章 页面刷新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/lockrexport 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. 存储限制实现会相对复杂
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
上一篇：flex布局 下一篇：iview实现select tree树形下拉框的示例代码
