页面刷新vuex数据消失问题解决方案 之 vuex中间件

Posted 王超元

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了页面刷新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. 存储限制实现会相对复杂

以上是关于页面刷新vuex数据消失问题解决方案 之 vuex中间件的主要内容,如果未能解决你的问题,请参考以下文章

页面刷新vuex数据消失问题解决方案

解决vuex中页面刷新数据消失问题

解决vuex中页面刷新数据消失问题

vue:vue页面刷新vuex数据消失问题

vue项目刷新页面导致数据消失问题解决

Vuex刷新时数据会消失,那如何解决?为什么还要使用Vuex