[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:敏感账号一次性登录;

img

当然你也可以存到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。

img

img

总结

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

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

Logo

前往低代码交流专区

更多推荐