[VUE2]vuex-persistedstate实现根据Storage存储对应模块

公众号：豆子前端

localStorage和sessionStorage简介

vuex-persistedstate插件可以让我们方便地使用webStorage来让vuex数据持久化，其中WebStorage又包括localStorage和sessionStorage，两者的一些对比如下。

• 生命周期：

  • localStorage:localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。
  • sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

• 存储大小：localStorage和sessionStorage的存储数据大小一般都是：5MB

• 存储位置：localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。

• 存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

• 获取方式：localStorage：window.localStorage;；sessionStorage：window.sessionStorage;。

• 应用场景：localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。sessionStorage：敏感账号一次性登录；

当然你也可以存到cookies里，但cookies最大只能放4kb，且h5的建议是使用webStorage取代cookies。

vuex-persistedstate简单使用

我们知道,使用vuex-persistedstate插件,可以让vuex自动存储在localstorage中.当我们使用模块的方式划分vuex的时候,vuex-persistedstate会默认将所有的模块都存储在本地。

/**
 * vuex的入口文件
 */
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate/index"

Vue.use(Vuex);

import {article} from "@/store/article";
import {user} from "@/store/user";
import {category} from "@/store/category";
import {editor} from "@/store/editor";

export default new Vuex.Store({
  modules: {
    article,
    user,
    editor,
    category
  },
  plugins: [createPersistedState()]
})

根据Storage存储对应模块

比如有关account（token、username等）的信息，需要在多个浏览器标签页(Chrome Tabs)里共享，那么便可以将改数据存到localStorage里。而有的数据，只希望它保存在当前的tab里，那么便可以使用sessionStorage，接下来直接上代码。

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

import app from './modules/app'
import user from './modules/user'
import platform from './modules/platform'
import upload from './modules/upload'

import permission from './modules/async-router'
import getters from './getters'

Vue.use(Vuex)


export default new Vuex.Store({
  modules: {
    app,
    user,
    permission,
    platform,
    upload
  },
  state: {},
  mutations: {},
  actions: {},
  getters,
  plugins: [
    // 需要localStorage存储起来的模块
    createPersistedState({
      storage: window.localStorage,
      paths: ['app', 'user', 'permission']
    }),
    // 需要sessionStorage存储起来的模块
    createPersistedState({
      storage: window.sessionStorage,
      paths: ['platform', 'upload']
    })
  ]
})

效果如下，其中紫色部分是localStorage，蓝色部分是sessionStorage。

总结

更多用法参见插件官网文档

https://github.com/robinvdvleuten/vuex-persistedstate